@wix/patterns-fields 1.0.0

package/src/components/rich-text/rich-text-input/rich-text-editor/utils/edit.ts

@@ -0,0 +1,697 @@
+import { v4 as uuid } from 'uuid';
+import type {
+  RawDraftContentBlock,
+  CompositeDecorator,
+  ContentBlock,
+} from 'draft-js';
+import { EditorState, SelectionState, ContentState } from 'draft-js';
+import type { InlineCreators } from 'draft-js-import-html';
+import { stateFromHTML } from 'draft-js-import-html';
+import type { Options } from 'draft-js-export-html';
+import { stateToHTML } from 'draft-js-export-html';
+
+import { isTruthy } from '../../../../../utils';
+
+import { filterHtmlString } from './filter-html';
+import { normalizeAttributes } from './normalize-attributes';
+import { styleToCSS } from './style-to-css';
+
+type Hash<T> = {
+  [key: string]: T;
+};
+export interface BlockNode {
+  block?: RawDraftContentBlock;
+  parent: BlockNode | null;
+  children: BlockNode[];
+}
+export type StringMap = Hash<string>;
+export type InlineStyle = {
+  element?: string;
+  style?: StringMap;
+  attributes?: StringMap;
+};
+export type CustomStyleMap = Hash<StringMap>;
+export type InlineStyles = Hash<InlineStyle>;
+
+export interface RichTextEditingOptions {
+  /**
+   * If headings are enabled, users can use headings styles to format their text.
+   * Headings styles are applied using `SPECIAL_CLASS_NAMES`.
+   * @default true
+   */
+  headingsEnabled?: boolean;
+}
+
+const DEFAULT_RICH_TEXT_EDITING_OPTIONS: RichTextEditingOptions = {
+  headingsEnabled: true,
+};
+
+const ZERO_WIDTH_SPACE = '\u200B';
+
+const PLAIN_TEXT_BLOCKS = ['SCRIPT'];
+
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+/**
+ * List of class names which we should handle in special way,
+ * because they linked with editor rich text themes
+ */
+const SPECIAL_CLASS_NAMES = [
+  'font_0',
+  'font_2',
+  'font_3',
+  'font_4',
+  'font_5',
+  'font_6',
+  'font_7',
+  'font_8',
+  'font_9',
+];
+
+/**
+ * We use custom draft.js block types to handle corresponding class names
+ */
+const CLASS_NAME_BLOCK_TYPE_MAPPER: StringMap = {
+  font_0: 'header-one',
+  font_2: 'header-two',
+  font_3: 'header-three',
+  font_4: 'header-four',
+  font_5: 'header-five',
+  font_6: 'header-six',
+  font_7: 'paragraph-one',
+  font_8: 'unstyled',
+  font_9: 'paragraph-three',
+};
+
+/**
+ * List of inline styles which we allow to bypass
+ */
+const INLINE_STYLES_WHITE_LIST = [
+  'fontSize',
+  'fontWeight',
+  'fontFamily',
+  'fontStyle',
+  'color',
+  'backgroundColor',
+  'letterSpacing',
+  'marginLeft',
+  'lineHeight',
+  'textAlign',
+] as const;
+/**
+ * List of html attributes which we allow to bypass
+ */
+const BLOCK_ATTRIBUTES_WHITE_LIST: (keyof HTMLElement)[] = ['dir', 'className'];
+
+/**
+ * List of elements which could not exist inside of list item
+ * draft.js will render them as span with custom inline styles
+ */
+const LIST_ITEM_CUSTOM_INLINE_CHILDREN: Hash<StringMap> = {
+  p: {},
+  h1: { fontSize: '2em', fontWeight: 'bolder' },
+  h2: { fontSize: '1.5em', fontWeight: 'bolder' },
+  h3: { fontSize: '1.17em', fontWeight: 'bolder' },
+  h4: { fontSize: '1.33em', fontWeight: 'bolder' },
+  h5: { fontSize: '.83em', fontWeight: 'bolder' },
+  h6: { fontSize: '.67em', fontWeight: 'bolder' },
+};
+
+type HTML_INLINED_BLOCK_ELEMENTS_WHITELIST =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6';
+type DRAFTJS_INLINED_BLOCK_ELEMENTS_WHITELIST =
+  | 'header-one'
+  | 'header-two'
+  | 'header-three'
+  | 'header-four'
+  | 'header-five'
+  | 'header-six';
+
+const INLINED_BLOCK_ELEMENTS_WHITELIST_MAP: {
+  [T in HTML_INLINED_BLOCK_ELEMENTS_WHITELIST]: DRAFTJS_INLINED_BLOCK_ELEMENTS_WHITELIST;
+} & {
+  [T in DRAFTJS_INLINED_BLOCK_ELEMENTS_WHITELIST]: HTML_INLINED_BLOCK_ELEMENTS_WHITELIST;
+} = {
+  h1: 'header-one',
+  h2: 'header-two',
+  h3: 'header-three',
+  h4: 'header-four',
+  h5: 'header-five',
+  h6: 'header-six',
+
+  'header-one': 'h1',
+  'header-two': 'h2',
+  'header-three': 'h3',
+  'header-four': 'h4',
+  'header-five': 'h5',
+  'header-six': 'h6',
+};
+
+const LIST_TYPES_MAP = {
+  ul: 'unordered-list-item',
+  ol: 'ordered-list-item',
+};
+
+const filterSpecialClassNames = (classNames: string) =>
+  classNames
+    .split(' ')
+    .filter((className) => !SPECIAL_CLASS_NAMES.includes(className))
+    .join(' ');
+
+const restoreSpecialClassName = (
+  specialClassName: string,
+  classNames?: string,
+) => (classNames ? `${specialClassName} ${classNames}` : specialClassName);
+
+const getClassNameByBlockType = (blockType: string): string | undefined => {
+  const entry = Object.entries(CLASS_NAME_BLOCK_TYPE_MAPPER).find(
+    ([, type]) => type === blockType,
+  );
+  const [className] = entry ?? [];
+  return className;
+};
+
+const getBlockTypeByClassName = (className: string): string =>
+  CLASS_NAME_BLOCK_TYPE_MAPPER[className];
+
+const getCustomBlockType = (
+  node: HTMLElement,
+  { headingsEnabled }: RichTextEditingOptions,
+) => {
+  const nodeName = node.nodeName.toLowerCase();
+
+  // if this is list item lets find out what type of parentNode
+  if (nodeName === 'li') {
+    return LIST_TYPES_MAP[node.parentElement?.nodeName as 'ul' | 'ol'];
+  }
+
+  if (!headingsEnabled) {
+    return HEADING_TAGS.includes(nodeName) ? 'unstyled' : undefined;
+  }
+
+  const className = SPECIAL_CLASS_NAMES.find((cn) =>
+    node.classList.contains(cn),
+  );
+
+  return className && getBlockTypeByClassName(className);
+};
+
+const getCustomInlinedBlockType = (
+  node: HTMLElement,
+  editingOptions: RichTextEditingOptions,
+) => {
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return;
+  }
+
+  const { headingsEnabled } = editingOptions;
+
+  const nodeName =
+    node.nodeName.toLowerCase() as HTML_INLINED_BLOCK_ELEMENTS_WHITELIST;
+
+  const headingBlockType = INLINED_BLOCK_ELEMENTS_WHITELIST_MAP[nodeName];
+
+  if (headingsEnabled && headingBlockType) {
+    return headingBlockType;
+  }
+
+  // but if this is not heading then it could be paragraph-one, paragraph-two or paragraph-three
+  return getCustomBlockType(node, editingOptions);
+};
+
+/**
+ * This function is needed to collect all inline styles in html attributes from white lists from block elements
+ */
+function createCustomBlockFn(editingOptions: RichTextEditingOptions) {
+  const { headingsEnabled } = editingOptions;
+  return (elem: Element) => {
+    const node = elem as HTMLElement;
+    const data: any = {};
+    const style: any = {};
+    const attributes: any = {};
+    const type = getCustomBlockType(node, editingOptions);
+
+    BLOCK_ATTRIBUTES_WHITE_LIST.forEach((name) => {
+      const value = node[name];
+
+      if (!value) {
+        return;
+      }
+
+      if (!headingsEnabled) {
+        attributes[name] = value;
+        return;
+      }
+
+      attributes[name] =
+        name === 'className' ? filterSpecialClassNames(value as string) : value;
+    });
+    INLINE_STYLES_WHITE_LIST.forEach((name) => {
+      const value = node.style[name];
+
+      if (value) {
+        style[name] = value;
+      }
+    });
+
+    if (Object.keys(style).length) {
+      data.style = style;
+    }
+
+    if (Object.keys(attributes).length) {
+      data.attributes = attributes;
+    }
+
+    const nodeName = node.nodeName.toLowerCase();
+
+    if (nodeName === 'li') {
+      data.inlineBlockType = node.dataset.inlineBlockType ?? 'unstyled';
+      data.inlineBlockStyle = node.dataset.inlineBlockStyle;
+    }
+
+    return type || Object.keys(data).length ? { type, data } : null;
+  };
+}
+
+function createCustomInlineFn() {
+  const inlineStyles: InlineStyles = {};
+
+  /**
+   * draft-import-html will traverse input html with this function
+   * We will use it for collecting all styles which we are not supporting
+   */
+  function customInlineFn(elem: Element, { Style }: InlineCreators) {
+    const node = elem as HTMLElement;
+    const inlineStyleItem: InlineStyle = {};
+
+    if (node.tagName === 'B' || node.style.fontWeight === 'bold') {
+      return Style('BOLD');
+    }
+
+    if (node.tagName === 'I' || node.style.fontStyle === 'italic') {
+      return Style('ITALIC');
+    }
+
+    if (node.tagName === 'U' || node.style.textDecoration === 'underline') {
+      return Style('UNDERLINE');
+    }
+
+    if (node.dataset.customInlineElement) {
+      const name = node.dataset.customInlineElement;
+      inlineStyleItem.element = name;
+
+      if (node.querySelector('a')) {
+        inlineStyleItem.style = { display: 'inline' };
+      }
+    }
+    for (const key of INLINE_STYLES_WHITE_LIST) {
+      const styleValue = node.style[key];
+
+      if (styleValue) {
+        inlineStyleItem.style = inlineStyleItem.style || {};
+        inlineStyleItem.style[key] = styleValue;
+      }
+    }
+
+    if (!Object.keys(inlineStyleItem).length) {
+      return;
+    }
+    const id = uuid();
+    inlineStyles[id] = inlineStyleItem;
+    return Style(id);
+  }
+
+  /**
+   * customStyleMap will be used by draft.js to make proper render of styles which we are not supported
+   */
+  function getCustomStyleMap() {
+    return Object.entries(inlineStyles).reduce<CustomStyleMap>(
+      (acc, [key, value]) => {
+        acc[key] = {
+          ...(value.element && LIST_ITEM_CUSTOM_INLINE_CHILDREN[value.element]),
+          ...value.style,
+        };
+        return acc;
+      },
+      {},
+    );
+  }
+
+  /**
+   * inlineStyles will be used in editorStateToHTML utility to restore original html for styles
+   * which we are not supported
+   */
+  function getInlineStyles() {
+    return Object.entries(inlineStyles)
+      .reverse()
+      .reduce<InlineStyles>((acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+      }, {});
+  }
+
+  return { customInlineFn, getCustomStyleMap, getInlineStyles };
+}
+
+function prepareHTML(
+  html: string,
+  editingOptions: RichTextEditingOptions,
+): string {
+  const node = new DOMParser().parseFromString(
+    /**
+     * Each ZERO_WIDTH_SPACE will create new line. We need to do it ourselfs
+     */
+    html.replace(new RegExp(`${ZERO_WIDTH_SPACE}+`, 'g'), ''),
+    'text/html',
+  ).body;
+
+  /**
+   * Breaks nested in body should be wrapped with paragraph to avoid loosing them,
+   * because stateFromHTML utility ignores them if they are not wrapped with block element
+   */
+  const breaks = Array.from(node.querySelectorAll('br'));
+  breaks.forEach((br) => {
+    if (br.parentNode !== node) {
+      return;
+    }
+
+    const p = document.createElement('p');
+    p.appendChild(document.createElement('br'));
+    br.parentNode.replaceChild(p, br);
+  });
+
+  const selector = Object.keys(LIST_ITEM_CUSTOM_INLINE_CHILDREN).join();
+
+  /**
+   * Nested empty spans will create multiple new lines, but in fact there is only one
+   * We need to explicitly replace them with <br>
+   */
+  const paragraphs = node.querySelectorAll<HTMLElement>(selector);
+  Array.from(paragraphs).forEach((p) => {
+    if (!p.innerText && !p.textContent) {
+      p.innerHTML = '<br>';
+    }
+  });
+
+  /**
+   * Draft js does not support block elements nested into list (li > h2) and will remove them
+   * In order these elements, they have to be temporary replaced with span[data-custom-inline-element=h2]
+   * This span later will be replaced with original node which will act like inline style
+   */
+  const listItems = node.querySelectorAll('li');
+  listItems.forEach(setInlineBlockType);
+
+  function setInlineBlockType(li: HTMLLIElement): void {
+    // Copy all styles from OL/UL on list items
+    const wrapper = li.parentNode as HTMLElement;
+    li.style.cssText = wrapper.style.cssText + ' ' + li.style.cssText;
+
+    const firstChild = li.firstChild as HTMLElement;
+    const firstChildCustomInlinedBlockType = getCustomInlinedBlockType(
+      firstChild,
+      editingOptions,
+    );
+
+    if (firstChildCustomInlinedBlockType) {
+      li.dataset.inlineBlockType = firstChildCustomInlinedBlockType;
+
+      const childNodes = Array.from(li.childNodes).slice(1);
+      li.innerHTML = firstChild.innerHTML;
+      childNodes.forEach((node) => li.appendChild(node));
+
+      // If we have nested list items we need to set inlineBlockType for them as well
+      li.querySelectorAll('li').forEach(setInlineBlockType);
+    }
+
+    const elementsToReplace = li.querySelectorAll<HTMLElement>(selector);
+    Array.from(elementsToReplace).forEach((elem) => {
+      const tagName = elem.tagName.toLowerCase();
+      const span = document.createElement('span');
+
+      span.innerHTML = elem.innerHTML;
+      span.style.cssText = elem.style.cssText;
+      span.dataset.customInlineElement = tagName;
+      elem.parentNode!.replaceChild(span, elem);
+    });
+  }
+
+  const plainTextBlocks = node.querySelectorAll<HTMLElement>(
+    PLAIN_TEXT_BLOCKS.join(),
+  );
+  Array.from(plainTextBlocks).forEach((block) => {
+    const span = document.createElement('span');
+    span.innerText = block.innerHTML;
+    block.parentNode!.replaceChild(span, block);
+  });
+
+  return node.innerHTML;
+}
+
+function createInitialSelection(contentState: ContentState) {
+  const lastBlock = contentState.getLastBlock();
+  const anchorKey = lastBlock.getKey();
+  const anchorOffset = lastBlock.getLength();
+  return new SelectionState({
+    anchorKey,
+    anchorOffset,
+    focusKey: anchorKey,
+    focusOffset: anchorOffset,
+  });
+}
+
+export function htmlToEditorState(
+  value?: string,
+  decorator?: CompositeDecorator,
+  editingOptions: RichTextEditingOptions = DEFAULT_RICH_TEXT_EDITING_OPTIONS,
+) {
+  if (value === undefined) {
+    return {
+      customStyleMap: {},
+      inlineStyles: {},
+      editorState: EditorState.createEmpty(decorator),
+    };
+  }
+  const html = prepareHTML(filterHtmlString(value, {}), editingOptions);
+
+  const customBlockFn = createCustomBlockFn(editingOptions);
+  const { customInlineFn, getCustomStyleMap, getInlineStyles } =
+    createCustomInlineFn();
+
+  const contentState = stateFromHTML(html, {
+    customBlockFn,
+    customInlineFn,
+  });
+
+  const editorState = EditorState.create({
+    currentContent: contentState,
+    selection: createInitialSelection(contentState),
+    decorator,
+  });
+
+  return {
+    editorState,
+    customStyleMap: getCustomStyleMap(),
+    inlineStyles: getInlineStyles(),
+  };
+}
+
+function createBlockStyleFn(
+  state: EditorState,
+  { headingsEnabled }: RichTextEditingOptions,
+) {
+  const directionMap = state.getDirectionMap();
+
+  return function blockStyleFn(block: ContentBlock) {
+    const data = block.getData();
+    const type = block.getType();
+
+    let style = data.get('style');
+    const attributes = data.get('attributes');
+    const isRTL = directionMap.get(block.getKey()) === 'RTL';
+    const dir = isRTL ? 'RTL' : undefined;
+
+    if (isRTL) {
+      style = {
+        textAlign: 'right',
+        ...style,
+      };
+    }
+
+    const className = headingsEnabled
+      ? getClassNameByBlockType(type)
+      : undefined;
+
+    if (style || attributes || className || dir) {
+      const classList = attributes && attributes.className;
+      return {
+        style,
+        attributes: {
+          ...attributes,
+          dir,
+          className: className
+            ? restoreSpecialClassName(className, classList)
+            : classList,
+        },
+      };
+    }
+
+    return undefined;
+  };
+}
+
+function createListItemBlockRenderer(options: Options) {
+  return (block: ContentBlock) => {
+    const inlineBlockType = block.getData().get('inlineBlockType', 'unstyled');
+
+    const innerBlock = block.set('type', inlineBlockType) as ContentBlock;
+    const { style, attributes } = options.blockStyleFn?.(innerBlock) ?? {};
+
+    const styleStr = style ? ` style="${styleToCSS(style)}"` : '';
+
+    const attrsStr = Object.entries(normalizeAttributes(attributes) ?? {})
+      .filter(([name]) => name !== 'class')
+      .map(([name, value]) => ` ${name}="${value}"`)
+      .join('');
+
+    const depth = block.getDepth();
+    const depthAttr = depth > 0 ? ` data-depth="${block.getDepth()}"` : '';
+
+    const tagString = `li${styleStr}${attrsStr}${depthAttr}`;
+
+    // make all inner "custom block elements" to use <span>
+    innerBlock.getCharacterList().forEach((charMetadata) =>
+      charMetadata?.getStyle().forEach((styleId) => {
+        if (
+          styleId &&
+          options.inlineStyles &&
+          options.inlineStyles[styleId] &&
+          ['div', 'p', ...HEADING_TAGS].includes(
+            options.inlineStyles?.[styleId].element ?? '',
+          )
+        ) {
+          options.inlineStyles[styleId].element = 'span';
+        }
+      }),
+    );
+
+    const innerContentState = ContentState.createFromBlockArray([innerBlock]);
+
+    return `<${tagString}>${stateToHTML(innerContentState, options)}</li>`;
+  };
+}
+
+export function editorStateToHTML(
+  state: EditorState,
+  inlineStyles: Hash<InlineStyle>,
+  editingOptions: RichTextEditingOptions = DEFAULT_RICH_TEXT_EDITING_OPTIONS,
+): string {
+  if (!state.getCurrentContent().hasText()) {
+    return '';
+  }
+
+  const contentState = state.getCurrentContent();
+  const blockStyleFn = createBlockStyleFn(state, editingOptions);
+
+  const commonOptions = {
+    inlineStyles,
+    blockStyleFn,
+  };
+
+  const html = stateToHTML(contentState, {
+    ...commonOptions,
+    blockRenderers: {
+      'unordered-list-item': createListItemBlockRenderer(commonOptions),
+      'ordered-list-item': createListItemBlockRenderer(commonOptions),
+    },
+  });
+
+  const node = document.createElement('div');
+  node.innerHTML = html;
+
+  // for each list, copy class attr from first li
+  Array.from(node.querySelectorAll('li:first-child'))
+    .filter((listItem) => !!listItem.firstElementChild)
+    .forEach((listItem) => {
+      const className = listItem.firstElementChild!.className;
+      isTruthy(className) && (listItem.parentElement!.className = className);
+    });
+
+  return formatNestedLists(node).innerHTML;
+}
+
+function formatNestedLists(node: HTMLElement, depth = 1): HTMLElement {
+  const liElements = Array.from(
+    node.querySelectorAll<HTMLLIElement>(`li[data-depth="${depth}"]`),
+  );
+
+  if (liElements.length === 0) {
+    return node;
+  }
+
+  const liGroups = liElements.reduce<HTMLLIElement[][]>((groups, li) => {
+    li.removeAttribute('data-depth');
+
+    if (groups.length === 0) {
+      groups.push([li]);
+      return groups;
+    }
+
+    const lastGroup = groups.at(-1)!;
+    const lastLi = lastGroup.at(-1)!;
+
+    if (li.previousElementSibling === lastLi) {
+      lastGroup.push(li);
+    } else {
+      groups.push([li]);
+    }
+
+    return groups;
+  }, []);
+
+  formatNestedLists(node, depth + 1);
+
+  liGroups.forEach((group) => {
+    const firstLi = group.at(0)!;
+    const parentLi = firstLi.previousElementSibling;
+
+    if (!parentLi) {
+      // group starts on first li, so nesting is not needed
+      return;
+    }
+
+    const listElement = document.createElement(
+      firstLi.parentElement!.tagName.toLowerCase(),
+    );
+    group.forEach((li) => {
+      if (
+        li.nextSibling?.nodeType === Node.TEXT_NODE &&
+        li.nextSibling?.textContent?.trim() === ''
+      ) {
+        li.parentElement!.removeChild(li.nextSibling);
+      }
+
+      li.parentElement!.removeChild(li);
+      listElement.appendChild(li);
+    });
+    parentLi.appendChild(listElement);
+  });
+
+  return node;
+}
+
+export function reformat(
+  html: string,
+  editingOptions: RichTextEditingOptions = DEFAULT_RICH_TEXT_EDITING_OPTIONS,
+) {
+  const { editorState, inlineStyles } = htmlToEditorState(
+    html,
+    undefined,
+    editingOptions,
+  );
+  return editorStateToHTML(editorState, inlineStyles, editingOptions);
+}