Электронные таблицы SocialCalc

Глава 19 из книги "Архитектура приложений с открытым исходным кодом", том 1.

Оригинал: SocialCalc, глава из книги "The Architecture of Open Source Applications" том 1.
Автор: Audrey Tang, перевод: Н.Ромоданов

19.6. Расширенные возможности редактирования

Первый пример, рассматриваемый нами, является улучшенным вариантом текстовой ячейки SocialCalc, которая позволяет непосредственно в редакторе таблиц отображать тест со расширенными возможностями (рис. 19.12).

Рис.19.12: Отображение в табличном редакторе текста с расширенными возможностями редактирования

Мы добавили эту возможность в SocialCalc сразу после его релиза 1.0 для того, чтобы выполнить популярную просьбу разрешить в рамках единого синтаксиса вставлять изображения, ссылки и текстовую разметку. Поскольку Socialtext уже имел wiki-платформу с открытым исходным кодом, было естественным повторно использовать синтаксис также и для SocialCalc.

Чтобы осуществить это, нам нужно специальным образом отрисовывать textvalueformat из text-wiki и, чтобы использовать этот результат, нужно изменить формат текстовых ячеек, определяемый по умолчанию.

Вы спросите, а что такое этот формат textvalueformat? Читаем дальше.

19.6.1. Типы и форматы

В SocialCalc, каждая ячейка имеет тип данных datatype и тип значений valuetype. Ячейки данных с текстом или цифрами соответствуют типам значений text/numeric (текстовый/числовой), а ячейки с формулами типа datatype="f" могут генерировать либо числовые, либо текстовые значения.

Вспомним, что на шаге визуализации Render, объект Sheet генерирует HTML для каждой из своих ячеек. Он делает это проверяя тип значений valuetype каждой ячейки: если он начинается с t, то атрибут ячейки textvalueformat определяет, как должна выполняться генерация. Если он начинается с n, то вместо этого используется атрибут nontextvalueformat.

Однако, если атрибут ячейки textvalueformat или nontextvalueformat не определен явно, то формат, используемый по умолчанию, берется из valuetype так, как это показано на рис.19.13.

Рис.19.13: Типы значений

Поддержка формата значений text-wiki закодирована в SocialCalc.format_text_for_display следующим образом:

if (SocialCalc.Callbacks.expand_wiki && /^text-wiki/.test(valueformat)) {
    // do general wiki markup
    displayvalue = SocialCalc.Callbacks.expand_wiki(
        displayvalue, sheetobj, linkstyle, valueformat
    );
}

Вместо того, чтобы непосредственно вставлять расширение wiki-to-HTML (преобразующее wiki-текст в HTML — прим.пер.) в format_text_for_display, мы определим новый триггер в SocialCalc.Callbacks. Этот стиль рекомендуется использовать везде в коде SocialCalc; он улучшает модульность благодаря тому, что позволяет различными способами подключать расширения для wiki-текста, а также сохранять совместимость с уже встроенными возможностями, в которых этот прием не нужен.

19.6.2. Отображение wiki-текста

Затем мы будем использовать Wikiwyg [1], библиотеку Javascript, осуществляющую двунаправленное преобразование между wiki-текстом и HTML.

Мы определяем функцию expand_wiki, которая берет из ячейки текст, пропускает его через анализатор wiki-текста в Wikiwyg и выдает текст на языке HTML:

var parser = new Document.Parser.Wikitext();
var emitter = new Document.Emitter.HTML();
SocialCalc.Callbacks.expand_wiki = function(val) {
    // Convert val from Wikitext to HTML
    return parser.parse(val, emitter);
}

Последний шаг включает в себя выполнение команды text-wiki - set sheet defaulttextvalueformat сразу после инициализации таблицы:

// Мы предполагаем, что в DOM уже имеется <div id="tableeditor"/>
var spreadsheet = new SocialCalc.SpreadsheetControl();
spreadsheet.InitializeSpreadsheetControl("tableeditor", 0, 0, 0);
spreadsheet.ExecuteCommand('set sheet defaulttextvalueformat text-wiki');

Если все объединит вместе, то шаг визуализации Render теперь работает так, как это показано на рис.19.14.

Рис.19.14: Шаг визуализации Render

Вот и все! Расширенный вариант SocialCalc теперь поддерживает расширенный набор синтаксиса, позволяющего использовать wiki-разметку:

*bold* _italic_ `monospace` {{unformatted}}
> indented text
* unordered list
# ordered list
"Hyperlink with label"<http://softwaregarden.com/>
{image: http://www.socialtext.com/images/logo.png}

Попробуйте ввести в ячейку A1 текст *bold* _italic_ `monospace`, и вы увидите, что он отображается в уже отформатированном виде (рис.19.15).

Рис.19.15: Пример Wikywyg

---

Далее: Совместные работы в режиме реального времени

---

---