Inline-редактор

<sf-inline-editor> — часть редактора страниц: правка текста content.heading и content.paragraph прямо на холсте. Доступно то, что есть в модели content: полужирный, курсив, код и ссылки; списков нет, потому что их нет в модели. События несут нормализованную модель, а не HTML.

Пример

<sf-inline-editor></sf-inline-editor>
<div id="inline-example-canvas"><section data-sf-composition-id="page"><p data-sf-composition-id="note">Доставка по городу — <strong>бесплатно</strong> при заказе от 3000 ₽.</p></section></div>
<p id="inline-example-status" role="status" class="m-0">Дважды щёлкните по абзацу. Enter сохраняет, Escape отменяет.</p>

// The inline editor returns the content model, never HTML. Here the page keeps
// the model and redraws the paragraph from it after each commit.
const initializeInlineExample = async () => {
  await customElements.whenDefined('sf-inline-editor');
  const canvas = document.querySelector('#inline-example-canvas');
  const status = document.querySelector('#inline-example-status');
  if (!canvas || canvas.dataset.exampleReady === 'true') return;
  canvas.dataset.exampleReady = 'true';
  const editor = document.querySelector('sf-inline-editor');
  let content = [
    { type: 'text', value: 'Доставка по городу — ' },
    { type: 'text', value: 'бесплатно', marks: ['strong'] },
    { type: 'text', value: ' при заказе от 3000 ₽.' },
  ];
  canvas.addEventListener('dblclick', (event) => {
    const element = event.target.closest('[data-sf-composition-id="note"]');
    if (!element || element.hasAttribute('data-sf-inline-editing')) return;
    event.preventDefault();
    editor.edit(element, { content, nodeId: 'note', label: 'Условия доставки' });
  });
  canvas.addEventListener('sf-inline-edit-commit', (event) => {
    content = event.detail.content;
    const paragraph = canvas.querySelector('[data-sf-composition-id="note"]');
    paragraph.replaceChildren(SF.InlineEditor.renderInlineDom(document, content));
    status.textContent = `Сохранено: ${JSON.stringify(content)}`;
  });
  canvas.addEventListener('sf-inline-edit-cancel', () => { status.textContent = 'Правка отменена.'; });
};

initializeInlineExample();

Применение

Подключение

Элемент ничего не показывает: достаточно поставить на странице <sf-inline-editor>, и загрузчик Framework подключит код редактора по требованию. Правку запускает SF.Composition.startInlineEdit(element, options) или метод edit(element, options) элемента. До загрузки вызов завершается ошибкой inline_editor_not_loaded, поэтому сначала дождитесь customElements.whenDefined('sf-inline-editor'). Повторный запуск на элементе, который уже правится, завершается ошибкой inline_edit_active.

Параметры правки

• content — текущая модель content; без неё редактор читает текст из элемента;
• nodeId — id узла Document, который придёт в событиях;
• label — доступное имя поля правки, например «Абзац»;
• marks — разрешённое оформление, подмножество strong, em, code;
• links — false отключает ссылки;
• messages — свои подписи панели форматирования.

Вызов возвращает {element, commit, cancel, value}: commit() и cancel() завершают правку из кода, value() возвращает текущую модель.

События

События отправляются на редактируемый элемент и всплывают до document:

• sf-inline-edit-input — {node_id, content} после каждого изменения;
• sf-inline-edit-commit — {node_id, content} по Enter или при уходе фокуса;
• sf-inline-edit-cancel — {node_id} по Escape; исходный HTML элемента возвращается без изменений.

Сохраняйте результат commit через свой контракт ревизий, проверяйте Document и перерисовывайте страницу.

await customElements.whenDefined('sf-inline-editor');
SF.Composition.startInlineEdit(element, {
  content: node.data.content,
  nodeId: node.id,
  label: 'Абзац',
});
canvas.addEventListener('sf-inline-edit-commit', (event) => {
  save(event.detail.node_id, event.detail.content);
});

Безопасность

• Ссылки допускаются только относительные, якорные и с протоколами http, https, mailto и tel; другие адреса редактор отклоняет.
• Вставка из Word и веб-страниц оставляет только разрешённое оформление: всё, чего нет в модели content или в marks, отбрасывается.
• События несут модель, а не HTML, поэтому в Document не попадает разметка, которую не проверила модель.

Доступность

• На время правки элемент становится полем role="textbox" с видимой рамкой и доступным именем из label; задавайте label на языке страницы.
• Ctrl+B, Ctrl+I и Ctrl+E (Cmd на Mac) переключают полужирный, курсив и код; Ctrl+K открывает поле адреса ссылки.
• Ctrl+Z отменяет шаг правки, Ctrl+Shift+Z и Ctrl+Y возвращают его.
• У кнопок панели форматирования есть aria-pressed и подсказка с сочетанием клавиш.
• Enter сохраняет, Escape отменяет, уход фокуса сохраняет. Ввод через IME не прерывается.
• Подписи панели берутся на языке страницы (русском или английском).

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

Атрибутов нет.

Методы

• edit(element: Element, options: object) — возвращает object. Начинает редактирование отображённого заголовка или абзаца; возвращает {element, commit, cancel, value}.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

• sf-inline-edit-input — detail: { node_id: string|null, content: array }. Актуальное нормализованное содержимое после изменения. Отправляется на редактируемом элементе; всплывает до document.
• sf-inline-edit-commit — detail: { node_id: string|null, content: array }. Редактирование завершено нажатием Enter или уходом фокуса; сохраняет хост. Отправляется на редактируемом элементе; всплывает до document.
• sf-inline-edit-cancel — detail: { node_id?: string|null }. Редактирование отменено нажатием Escape; исходный HTML восстановлен. Отправляется на редактируемом элементе; всплывает до document.

Доступность

• Доступное имя: внутренний.
• Клавиши: Mod+B, Mod+I, Mod+E, Mod+K, Mod+Z, Mod+Shift+Z, Mod+Y, Enter, Escape.
• Фокус: Носитель sf-inline-editor скрыт и не имеет роли. Во время редактирования редактируемый элемент становится подписанным role=textbox с видимым контуром; панель форматирования имеет состояния aria-pressed и aria-keyshortcuts. Enter фиксирует, Escape отменяет, потеря фокуса фиксирует; ввод через IME никогда не прерывается.

Минимальная разметка

<sf-inline-editor></sf-inline-editor><script>await customElements.whenDefined('sf-inline-editor'); SF.Composition.startInlineEdit(paragraph, {content, nodeId: 'p1', label: 'Paragraph'});</script>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/inline-editor
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-inline-editor

См. также

• Оверлей редактора — выбор узла, текст которого правится.
• Правка текста на месте — как редактор страниц запускает правку и сохраняет результат.