@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.20

package/packages/volto-slate/src/utils/slate-string-utils.js

@@ -1,408 +0,0 @@
-// NOTE: file taken from Slate.js on 15th of October, 2021
-
-/**
- * Constants for string distance checking.
- */
-
-const SPACE = /\s/;
-const PUNCTUATION = /[\u0021-\u0023\u0025-\u002A\u002C-\u002F\u003A\u003B\u003F\u0040\u005B-\u005D\u005F\u007B\u007D\u00A1\u00A7\u00AB\u00B6\u00B7\u00BB\u00BF\u037E\u0387\u055A-\u055F\u0589\u058A\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0609\u060A\u060C\u060D\u061B\u061E\u061F\u066A-\u066D\u06D4\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u0AF0\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F3A-\u0F3D\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u1400\u166D\u166E\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u2010-\u2027\u2030-\u2043\u2045-\u2051\u2053-\u205E\u207D\u207E\u208D\u208E\u2329\u232A\u2768-\u2775\u27C5\u27C6\u27E6-\u27EF\u2983-\u2998\u29D8-\u29DB\u29FC\u29FD\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E3B\u3001-\u3003\u3008-\u3011\u3014-\u301F\u3030\u303D\u30A0\u30FB\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB\uFD3E\uFD3F\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE61\uFE63\uFE68\uFE6A\uFE6B\uFF01-\uFF03\uFF05-\uFF0A\uFF0C-\uFF0F\uFF1A\uFF1B\uFF1F\uFF20\uFF3B-\uFF3D\uFF3F\uFF5B\uFF5D\uFF5F-\uFF65]/;
-const CHAMELEON = /['\u2018\u2019]/;
-
-/**
- * Get the distance to the end of the first character in a string of text.
- */
-
-export const getCharacterDistance = (str, isRTL = false) => {
-  const isLTR = !isRTL;
-
-  let dist = 0;
-  // prev types:
-  // NSEQ: non sequenceable codepoint.
-  // MOD: modifier
-  // ZWJ: zero width joiner
-  // VAR: variation selector
-  // BMP: sequenceable codepoint from basic multilingual plane
-  // RI: regional indicator
-  // KC: keycap
-  // TAG: tag
-  let prev = null;
-
-  const codepoints = isLTR ? str : codepointsIteratorRTL(str);
-
-  for (const codepoint of codepoints) {
-    const code = codepoint.codePointAt(0);
-    if (!code) break;
-
-    // Check if codepoint is part of a sequence.
-    if (isZWJ(code)) {
-      dist += codepoint.length;
-      prev = 'ZWJ';
-
-      continue;
-    }
-
-    const [isKeycapStart, isKeycapEnd] = isLTR
-      ? [isKeycap, isCombiningEnclosingKeycap]
-      : [isCombiningEnclosingKeycap, isKeycap];
-    if (isKeycapStart(code)) {
-      if (prev === 'KC') {
-        break;
-      }
-
-      dist += codepoint.length;
-      prev = 'KC';
-      continue;
-    }
-    if (isKeycapEnd(code)) {
-      dist += codepoint.length;
-      break;
-    }
-
-    if (isVariationSelector(code)) {
-      dist += codepoint.length;
-
-      if (isLTR && prev === 'BMP') {
-        break;
-      }
-
-      prev = 'VAR';
-
-      continue;
-    }
-
-    if (isBMPEmoji(code)) {
-      if (isLTR && prev && prev !== 'ZWJ' && prev !== 'VAR') {
-        break;
-      }
-
-      dist += codepoint.length;
-
-      if (isRTL && prev === 'VAR') {
-        break;
-      }
-
-      prev = 'BMP';
-      continue;
-    }
-
-    if (isModifier(code)) {
-      dist += codepoint.length;
-      prev = 'MOD';
-
-      continue;
-    }
-
-    const [isTagStart, isTagEnd] = isLTR
-      ? [isBlackFlag, isCancelTag]
-      : [isCancelTag, isBlackFlag];
-    if (isTagStart(code)) {
-      if (prev === 'TAG') break;
-
-      dist += codepoint.length;
-      prev = 'TAG';
-      continue;
-    }
-    if (isTagEnd(code)) {
-      dist += codepoint.length;
-      break;
-    }
-    if (prev === 'TAG' && isTag(code)) {
-      dist += codepoint.length;
-      continue;
-    }
-
-    if (isRegionalIndicator(code)) {
-      dist += codepoint.length;
-
-      if (prev === 'RI') {
-        break;
-      }
-
-      prev = 'RI';
-
-      continue;
-    }
-
-    if (!isBMP(code)) {
-      // If previous code point is not sequenceable, it means we are not in a
-      // sequence.
-      if (prev === 'NSEQ') {
-        break;
-      }
-
-      dist += codepoint.length;
-      prev = 'NSEQ';
-
-      continue;
-    }
-
-    // Modifier 'groups up' with what ever character is before that (even whitespace), need to
-    // look ahead.
-    if (isLTR && prev === 'MOD') {
-      dist += codepoint.length;
-      break;
-    }
-
-    // If while loop ever gets here, we're done (e.g latin chars).
-    break;
-  }
-
-  return dist || 1;
-};
-
-/**
- * Get the distance to the end of the first word in a string of text.
- */
-
-export const getWordDistance = (text, isRTL = false) => {
-  let dist = 0;
-  let started = false;
-
-  while (text.length > 0) {
-    const charDist = getCharacterDistance(text, isRTL);
-    const [char, remaining] = splitByCharacterDistance(text, charDist, isRTL);
-
-    if (isWordCharacter(char, remaining, isRTL)) {
-      started = true;
-      dist += charDist;
-    } else if (!started) {
-      dist += charDist;
-    } else {
-      break;
-    }
-
-    text = remaining;
-  }
-
-  return dist;
-};
-
-/**
- * Split a string in two parts at a given distance starting from the end when
- * `isRTL` is set to `true`.
- */
-
-export const splitByCharacterDistance = (str, dist, isRTL) => {
-  if (isRTL) {
-    const at = str.length - dist;
-    return [str.slice(at, str.length), str.slice(0, at)];
-  }
-
-  return [str.slice(0, dist), str.slice(dist)];
-};
-
-/**
- * Check if a character is a word character. The `remaining` argument is used
- * because sometimes you must read subsequent characters to truly determine it.
- */
-
-const isWordCharacter = (char, remaining, isRTL = false) => {
-  if (SPACE.test(char)) {
-    return false;
-  }
-
-  // Chameleons count as word characters as long as they're in a word, so
-  // recurse to see if the next one is a word character or not.
-  if (CHAMELEON.test(char)) {
-    const charDist = getCharacterDistance(remaining, isRTL);
-    const [nextChar, nextRemaining] = splitByCharacterDistance(
-      remaining,
-      charDist,
-      isRTL,
-    );
-
-    if (isWordCharacter(nextChar, nextRemaining, isRTL)) {
-      return true;
-    }
-  }
-
-  if (PUNCTUATION.test(char)) {
-    return false;
-  }
-
-  return true;
-};
-
-/**
- * Does `code` form Modifier with next one.
- *
- * https://emojipedia.org/modifiers/
- */
-
-const isModifier = (code) => {
-  return code >= 0x1f3fb && code <= 0x1f3ff;
-};
-
-/**
- * Is `code` a Variation Selector.
- *
- * https://codepoints.net/variation_selectors
- */
-
-const isVariationSelector = (code) => {
-  return code <= 0xfe0f && code >= 0xfe00;
-};
-
-/**
- * Is `code` a code point used in keycap sequence.
- *
- * https://emojipedia.org/emoji-keycap-sequence/
- */
-
-const isKeycap = (code) => {
-  return (
-    (code >= 0x30 && code <= 0x39) || // digits
-    code === 0x23 || // number sign
-    code === 0x2a
-  );
-};
-
-/**
- * Is `code` a Combining Enclosing Keycap.
- *
- * https://emojipedia.org/combining-enclosing-keycap/
- */
-
-const isCombiningEnclosingKeycap = (code) => {
-  return code === 0x20e3;
-};
-
-/**
- * Is `code` one of the BMP codes used in emoji sequences.
- *
- * https://emojipedia.org/emoji-zwj-sequences/
- */
-
-const isBMPEmoji = (code) => {
-  // This requires tiny bit of maintanance, better ideas?
-  // Fortunately it only happens if new Unicode Standard
-  // is released. Fails gracefully if upkeep lags behind,
-  // same way Slate previously behaved with all emojis.
-  return (
-    code === 0x2764 || // heart (❤)
-    code === 0x2642 || // male (♂)
-    code === 0x2640 || // female (♀)
-    code === 0x2620 || // scull (☠)
-    code === 0x2695 || // medical (⚕)
-    code === 0x2708 || // plane (✈️)
-    code === 0x25ef || // large circle (◯)
-    code === 0x2b06 || // up arrow (⬆)
-    code === 0x2197 || // up-right arrow (↗)
-    code === 0x27a1 || // right arrow (➡)
-    code === 0x2198 || // down-right arrow (↘)
-    code === 0x2b07 || // down arrow (⬇)
-    code === 0x2199 || // down-left arrow (↙)
-    code === 0x2b05 || // left arrow (⬅)
-    code === 0x2196 || // up-left arrow (↖)
-    code === 0x2195 || // up-down arrow (↕)
-    code === 0x2194 || // left-right arrow (↔)
-    code === 0x21a9 || // right arrow curving left (↩)
-    code === 0x21aa || // left arrow curving right (↪)
-    code === 0x2934 || // right arrow curving up (⤴)
-    code === 0x2935 // right arrow curving down (⤵)
-  );
-};
-
-/**
- * Is `code` a Regional Indicator.
- *
- * https://en.wikipedia.org/wiki/Regional_indicator_symbol
- */
-
-const isRegionalIndicator = (code) => {
-  return code >= 0x1f1e6 && code <= 0x1f1ff;
-};
-
-/**
- * Is `code` from basic multilingual plane.
- *
- * https://codepoints.net/basic_multilingual_plane
- */
-
-const isBMP = (code) => {
-  return code <= 0xffff;
-};
-
-/**
- * Is `code` a Zero Width Joiner.
- *
- * https://emojipedia.org/zero-width-joiner/
- */
-
-const isZWJ = (code) => {
-  return code === 0x200d;
-};
-
-/**
- * Is `code` a Black Flag.
- *
- * https://emojipedia.org/black-flag/
- */
-
-const isBlackFlag = (code) => {
-  return code === 0x1f3f4;
-};
-
-/**
- * Is `code` a Tag.
- *
- * https://emojipedia.org/emoji-tag-sequence/
- */
-
-const isTag = (code) => {
-  return code >= 0xe0000 && code <= 0xe007f;
-};
-
-/**
- * Is `code` a Cancel Tag.
- *
- * https://emojipedia.org/cancel-tag/
- */
-
-const isCancelTag = (code) => {
-  return code === 0xe007f;
-};
-
-/**
- * Iterate on codepoints from right to left.
- */
-
-export const codepointsIteratorRTL = function* (str) {
-  const end = str.length - 1;
-
-  for (let i = 0; i < str.length; i++) {
-    const char1 = str.charAt(end - i);
-
-    if (isLowSurrogate(char1.charCodeAt(0))) {
-      const char2 = str.charAt(end - i - 1);
-      if (isHighSurrogate(char2.charCodeAt(0))) {
-        yield char2 + char1;
-
-        i++;
-        continue;
-      }
-    }
-
-    yield char1;
-  }
-};
-
-/**
- * Is `charCode` a high surrogate.
- *
- * https://en.wikipedia.org/wiki/Universal_Character_Set_characters#Surrogates
- */
-
-const isHighSurrogate = (charCode) => {
-  return charCode >= 0xd800 && charCode <= 0xdbff;
-};
-
-/**
- * Is `charCode` a low surrogate.
- *
- * https://en.wikipedia.org/wiki/Universal_Character_Set_characters#Surrogates
- */
-
-const isLowSurrogate = (charCode) => {
-  return charCode >= 0xdc00 && charCode <= 0xdfff;
-};

package/packages/volto-slate/src/utils/volto-blocks.js

@@ -1,314 +0,0 @@
-import ReactDOM from 'react-dom';
-import { v4 as uuid } from 'uuid';
-import {
-  addBlock,
-  changeBlock,
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
-} from '@plone/volto/helpers';
-import { Transforms, Editor, Node, Text, Path } from 'slate';
-import { serializeNodesToText } from '@plone/volto-slate/editor/render';
-import { omit } from 'lodash';
-import config from '@plone/volto/registry';
-
-function fromEntries(pairs) {
-  const res = {};
-  pairs.forEach((p) => {
-    res[p[0]] = p[1];
-  });
-  return res;
-}
-
-// TODO: should be made generic, no need for "prevBlock.value"
-export function mergeSlateWithBlockBackward(editor, prevBlock, event) {
-  // To work around current architecture limitations, read the value from
-  // previous block. Replace it in the current editor (over which we have
-  // control), join with current block value, then use this result for previous
-  // block, delete current block
-
-  const prev = prevBlock.value;
-
-  // collapse the selection to its start point
-  Transforms.collapse(editor, { edge: 'start' });
-
-  let rangeRef;
-  let end;
-
-  Editor.withoutNormalizing(editor, () => {
-    // insert block #0 contents in block #1 contents, at the beginning
-    Transforms.insertNodes(editor, prev, {
-      at: Editor.start(editor, []),
-    });
-
-    // the contents that should be moved into the `ul`, as the last `li`
-    rangeRef = Editor.rangeRef(editor, {
-      anchor: Editor.start(editor, [1]),
-      focus: Editor.end(editor, [1]),
-    });
-
-    const source = rangeRef.current;
-
-    end = Editor.end(editor, [0]);
-
-    let endPoint;
-
-    Transforms.insertNodes(editor, { text: '' }, { at: end });
-
-    end = Editor.end(editor, [0]);
-
-    Transforms.splitNodes(editor, {
-      at: end,
-      always: true,
-      height: 1,
-      mode: 'highest',
-      match: (n) => n.type === 'li' || Text.isText(n),
-    });
-
-    endPoint = Editor.end(editor, [0]);
-
-    Transforms.moveNodes(editor, {
-      at: source,
-      to: endPoint.path,
-      mode: 'all',
-      match: (n, p) => p.length === 2,
-    });
-  });
-
-  const [n] = Editor.node(editor, [1]);
-
-  if (Editor.isEmpty(editor, n)) {
-    Transforms.removeNodes(editor, { at: [1] });
-  }
-
-  rangeRef.unref();
-
-  const [, lastPath] = Editor.last(editor, [0]);
-
-  end = Editor.start(editor, Path.parent(lastPath));
-
-  return end;
-}
-
-export function mergeSlateWithBlockForward(editor, nextBlock, event) {
-  // To work around current architecture limitations, read the value from next
-  // block. Replace it in the current editor (over which we have control), join
-  // with current block value, then use this result for next block, delete
-  // current block
-
-  const next = nextBlock.value;
-
-  // collapse the selection to its start point
-  Transforms.collapse(editor, { edge: 'end' });
-  Transforms.insertNodes(editor, next, {
-    at: Editor.end(editor, []),
-  });
-
-  Editor.deleteForward(editor, { unit: 'character' });
-}
-
-export function syncCreateSlateBlock(value) {
-  const id = uuid();
-  const block = {
-    '@type': 'slate',
-    value: JSON.parse(JSON.stringify(value)),
-    plaintext: serializeNodesToText(value),
-  };
-  return [id, block];
-}
-
-export function createImageBlock(url, index, props) {
-  const { properties, onChangeField, onSelectBlock } = props;
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-
-  const [id, formData] = addBlock(properties, 'image', index + 1);
-  const newFormData = changeBlock(formData, id, { '@type': 'image', url });
-
-  ReactDOM.unstable_batchedUpdates(() => {
-    onChangeField(blocksFieldname, newFormData[blocksFieldname]);
-    onChangeField(blocksLayoutFieldname, newFormData[blocksLayoutFieldname]);
-    onSelectBlock(id);
-  });
-}
-
-export const createAndSelectNewBlockAfter = (editor, blockValue) => {
-  const blockProps = editor.getBlockProps();
-
-  const { onSelectBlock, properties, index, onChangeField } = blockProps;
-
-  const [blockId, formData] = addBlock(properties, 'slate', index + 1);
-
-  const options = {
-    '@type': 'slate',
-    value: JSON.parse(JSON.stringify(blockValue)),
-    plaintext: serializeNodesToText(blockValue),
-  };
-
-  const newFormData = changeBlock(formData, blockId, options);
-
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-  // console.log('layout', blocksLayoutFieldname, newFormData);
-
-  ReactDOM.unstable_batchedUpdates(() => {
-    blockProps.saveSlateBlockSelection(blockId, 'start');
-    onChangeField(blocksFieldname, newFormData[blocksFieldname]);
-    onChangeField(blocksLayoutFieldname, newFormData[blocksLayoutFieldname]);
-    onSelectBlock(blockId);
-  });
-};
-
-export function getNextVoltoBlock(index, properties) {
-  // TODO: look for any next slate block
-  // join this block with previous block, if previous block is slate
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-
-  const blocks_layout = properties[blocksLayoutFieldname];
-
-  if (index === blocks_layout.items.length) return;
-
-  const nextBlockId = blocks_layout.items[index + 1];
-  const nextBlock = properties[blocksFieldname][nextBlockId];
-
-  return [nextBlock, nextBlockId];
-}
-
-export function getPreviousVoltoBlock(index, properties) {
-  // TODO: look for any prev slate block
-  if (index === 0) return;
-
-  const blocksFieldname = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-
-  const blocks_layout = properties[blocksLayoutFieldname];
-  const prevBlockId = blocks_layout.items[index - 1];
-  const prevBlock = properties[blocksFieldname][prevBlockId];
-
-  return [prevBlock, prevBlockId];
-}
-
-// //check for existing img children
-// const checkContainImg = (elements) => {
-//   var check = false;
-//   elements.forEach((e) =>
-//     e.children.forEach((c) => {
-//       if (c && c.type && c.type === 'img') {
-//         check = true;
-//       }
-//     }),
-//   );
-//   return check;
-// };
-
-// //check for existing table children
-// const checkContainTable = (elements) => {
-//   var check = false;
-//   elements.forEach((e) => {
-//     if (e && e.type && e.type === 'table') {
-//       check = true;
-//     }
-//   });
-//   return check;
-// };
-
-/**
- * The editor has the properties `dataTransferHandlers` (object) and
- * `dataTransferFormatsOrder` and in `dataTransferHandlers` are functions which
- * sometimes must call this function. Some types of data storeable in Slate
- * documents can be and should be put into separate Volto blocks. The
- * `deconstructToVoltoBlocks` function scans the contents of the Slate document
- * and, through configured Volto block emitters, it outputs separate Volto
- * blocks into the same Volto page form. The `deconstructToVoltoBlocks` function
- * should be called only in key places where it is necessary.
- *
- * @example See the `src/editor/extensions/insertData.js` file.
- *
- * @param {Editor} editor The Slate editor object which should be deconstructed
- * if possible.
- *
- * @returns {Promise}
- */
-export function deconstructToVoltoBlocks(editor) {
-  // Explodes editor content into separate blocks
-  // If the editor has multiple top-level children, split the current block
-  // into multiple slate blocks. This will delete and replace the current
-  // block.
-  //
-  // It returns a promise that, when resolved, will pass a list of Volto block
-  // ids that were affected
-  //
-  // For the Volto blocks manipulation we do low-level changes to the context
-  // form state, as that ensures a better performance (no un-needed UI updates)
-
-  if (!editor.getBlockProps) return;
-
-  const blockProps = editor.getBlockProps();
-  const { slate } = config.settings;
-  const { voltoBlockEmiters } = slate;
-
-  return new Promise((resolve, reject) => {
-    if (!editor?.children) return;
-
-    if (editor.children.length === 1) {
-      return resolve([blockProps.block]);
-    }
-    const { properties, onChangeField, onSelectBlock } = editor.getBlockProps();
-    const blocksFieldname = getBlocksFieldname(properties);
-    const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-
-    const { index } = blockProps;
-    let blocks = [];
-
-    // TODO: should use Editor.levels() instead of Node.children
-    const pathRefs = Array.from(Node.children(editor, [])).map(([, path]) =>
-      Editor.pathRef(editor, path),
-    );
-
-    for (const pathRef of pathRefs) {
-      // extra nodes are always extracted after the text node
-      let extras = voltoBlockEmiters
-        .map((emit) => emit(editor, pathRef))
-        .flat(1);
-
-      // The node might have been replaced with a Volto block
-      if (pathRef.current) {
-        const [childNode] = Editor.node(editor, pathRef.current);
-        if (childNode && !Editor.isEmpty(editor, childNode))
-          blocks.push(syncCreateSlateBlock([childNode]));
-      }
-      blocks = [...blocks, ...extras];
-    }
-
-    const blockids = blocks.map((b) => b[0]);
-
-    // TODO: add the placeholder block, because we remove it
-    // (when we remove the current block)
-
-    const blocksData = omit(
-      {
-        ...properties[blocksFieldname],
-        ...fromEntries(blocks),
-      },
-      blockProps.block,
-    );
-    const layoutData = {
-      ...properties[blocksLayoutFieldname],
-      items: [
-        ...properties[blocksLayoutFieldname].items.slice(0, index),
-        ...blockids,
-        ...properties[blocksLayoutFieldname].items.slice(index),
-      ].filter((id) => id !== blockProps.block),
-    };
-
-    // TODO: use onChangeFormData instead of this API style
-    ReactDOM.unstable_batchedUpdates(() => {
-      onChangeField(blocksFieldname, blocksData);
-      onChangeField(blocksLayoutFieldname, layoutData);
-      onSelectBlock(blockids[blockids.length - 1]);
-      // resolve(blockids);
-      // or rather this?
-      Promise.resolve().then(resolve(blockids));
-    });
-  });
-}