@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.5

package/packages/volto-slate/src/editor/plugins/Markdown/constants.js

@@ -1,81 +0,0 @@
-import { toggleList, unwrapList } from './utils';
-import { isBlockActive } from '@plone/volto-slate/utils';
-import { UL, OL, LI } from '@plone/volto-slate/constants';
-
-/**
- * Uses the old toggleList function to toggle lists on or off or from a type to another.
- * @param {Editor} editor The editor to which to apply the change.
- * @param {string} format A list type.
- */
-export const localToggleList = (editor, format) => {
-  toggleList(editor, {
-    typeList: format,
-    isBulletedActive: !!isBlockActive(editor, UL),
-    isNumberedActive: !!isBlockActive(editor, OL),
-  });
-};
-
-/**
- * The autoformat rules created by this plugin for the Markdown language.
- *
- * @todo Use constants instead of the remaining hard-coded types (h2, h3 etc.).
- */
-export const autoformatRules = [
-  {
-    type: 'h2',
-    markup: '#',
-  },
-  {
-    type: 'h3',
-    markup: '##',
-  },
-  {
-    type: LI,
-    markup: ['*', '-', '+'],
-    format: (editor) => {
-      localToggleList(editor, 'ul');
-    },
-  },
-  {
-    type: LI,
-    markup: ['1.', '1)'],
-    format: (editor) => {
-      localToggleList(editor, 'ol');
-    },
-  },
-  {
-    type: 'blockquote',
-    markup: ['>'],
-    // preFormat,
-  },
-  {
-    type: 'bold',
-    between: ['**', '**'],
-    mode: 'inline',
-    insertTrigger: true,
-  },
-  {
-    type: 'bold',
-    between: ['__', '__'],
-    mode: 'inline',
-    insertTrigger: true,
-  },
-  {
-    type: 'italic',
-    between: ['*', '*'],
-    mode: 'inline',
-    insertTrigger: true,
-  },
-  {
-    type: 'italic',
-    between: ['_', '_'],
-    mode: 'inline',
-    insertTrigger: true,
-  },
-  {
-    type: 'strikethrough',
-    between: ['~~', '~~'],
-    mode: 'inline',
-    insertTrigger: true,
-  },
-];

package/packages/volto-slate/src/editor/plugins/Markdown/extensions.js

@@ -1,334 +0,0 @@
-import { castArray, map } from 'lodash';
-import { Editor, Path, Point, Range, Transforms } from 'slate';
-
-/**
- * Get range from {@link getPointBefore} to the end point of `at`.
- */
-export const getRangeBefore = (editor, at, options) => {
-  const anchor = getPointBefore(editor, at, options);
-  if (!anchor) return;
-
-  const focus = Editor.point(editor, at, { edge: 'end' });
-
-  return {
-    anchor,
-    focus,
-  };
-};
-
-/**
- * Autoformat in the middle of a block
- */
-export const autoformatInlineBlock = (
-  editor,
-  { type, markup, preFormat, format },
-) => {
-  const markupRange = getRangeBefore(editor, editor.selection, {
-    matchString: markup,
-    skipInvalid: true,
-  });
-
-  if (markupRange) {
-    autoformatBlock(editor, type, markupRange, {
-      preFormat: () => {
-        editor.insertBreak();
-        if (preFormat) {
-          preFormat(editor);
-        }
-      },
-      format,
-    });
-
-    return true;
-  }
-};
-
-/**
- * {@link Editor.before} with additional options.
- * TODO: support for sequence of any characters.
- */
-export const getPointBefore = (editor, at, options) => {
-  if (!options || (!options.match && !options.matchString)) {
-    return Editor.before(editor, at, options);
-  }
-
-  let beforeAt = at;
-  let previousBeforePoint = Editor.point(editor, at, { edge: 'end' });
-
-  const stackLength = (options.matchString?.length || 0) + 1;
-  const stack = Array(stackLength);
-
-  const unitOffset = !options.unit || options.unit === 'offset';
-
-  let count = 0;
-  while (true) {
-    const beforePoint = Editor.before(editor, beforeAt, options);
-
-    // not found
-    if (!beforePoint) return;
-
-    // different path
-    if (
-      !options.multiPaths &&
-      !Path.equals(beforePoint.path, previousBeforePoint.path)
-    ) {
-      return;
-    }
-
-    const beforeString = Editor.string(editor, {
-      anchor: beforePoint,
-      focus: previousBeforePoint,
-    });
-
-    const matchString = castArray(options.matchString);
-
-    let beforeStringToMatch = beforeString;
-
-    if (unitOffset && stackLength) {
-      stack.unshift({
-        point: beforePoint,
-        text: beforeString,
-      });
-      stack.pop();
-
-      beforeStringToMatch = map(stack.slice(0, -1), 'text').join('');
-    }
-
-    if (
-      matchString.includes(beforeStringToMatch) ||
-      options.match?.({ beforeString: beforeStringToMatch, beforePoint, at })
-    ) {
-      if (options.afterMatch) {
-        if (stackLength && unitOffset) {
-          return stack[stack.length - 1]?.point;
-        }
-        return previousBeforePoint;
-      }
-      return beforePoint;
-    }
-
-    previousBeforePoint = beforePoint;
-    beforeAt = beforePoint;
-
-    count += 1;
-
-    if (!options.skipInvalid) {
-      if (!matchString || count > matchString.length) return;
-    }
-  }
-};
-
-export const autoformatInline = (
-  editor,
-  { type, between, markup, ignoreTrim },
-) => {
-  const selection = editor.selection;
-
-  const startMarkup = between ? between[0] : markup;
-  const endMarkup = between ? between[1] : '';
-
-  let endMarkupPointBefore = selection.anchor;
-  if (endMarkup) {
-    endMarkupPointBefore = getPointBefore(editor, selection, {
-      matchString: endMarkup,
-    });
-    if (!endMarkupPointBefore) return false;
-  }
-
-  const startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
-    matchString: startMarkup,
-    skipInvalid: true,
-    afterMatch: true,
-  });
-
-  if (!startMarkupPointAfter) return false;
-
-  // found
-
-  const markupRange = {
-    anchor: startMarkupPointAfter,
-    focus: endMarkupPointBefore,
-  };
-
-  if (!ignoreTrim) {
-    const markupText = getText(editor, markupRange);
-    if (markupText.trim() !== markupText) return false;
-  }
-
-  // delete end markup
-  if (endMarkup) {
-    endMarkupPointBefore = getPointBefore(editor, selection, {
-      matchString: endMarkup,
-    });
-    Transforms.delete(editor, {
-      at: {
-        anchor: endMarkupPointBefore,
-        focus: selection.anchor,
-      },
-    });
-  }
-
-  // add mark to the text between the markups
-  Transforms.select(editor, markupRange);
-  editor.addMark(type, true);
-  Transforms.collapse(editor, { edge: 'end' });
-  editor.removeMark(type);
-
-  // delete start markup
-  const startMarkupPointBefore = getPointBefore(editor, selection, {
-    matchString: startMarkup,
-    skipInvalid: true,
-  });
-  Transforms.delete(editor, {
-    at: {
-      anchor: startMarkupPointBefore,
-      focus: startMarkupPointAfter,
-    },
-  });
-
-  return true;
-};
-
-export const autoformatBlock = (editor, type, at, { preFormat, format }) => {
-  Transforms.delete(editor, { at });
-
-  if (preFormat) {
-    preFormat(editor);
-  }
-
-  if (!format) {
-    Transforms.setNodes(
-      editor,
-      { type },
-      { match: (n) => Editor.isBlock(editor, n) },
-    );
-  } else {
-    format(editor);
-  }
-};
-
-/**
- * See {@link Range.isCollapsed}.
- * Return false if `range` is not defined.
- */
-export const isCollapsed = (range) => !!range && Range.isCollapsed(range);
-
-/**
- * See {@link Editor.string}.
- * If `at` is not defined, return an empty string.
- */
-export const getText = (editor, at) => (at && Editor.string(editor, at)) ?? '';
-
-/**
- * Get the bloc {
- * k above a location (default: selection).
- * If not found, return the editor entry.
- */
-export const getBlockAbove = (editor, options = {}) =>
-  Editor.above(editor, {
-    match: (n) => Editor.isBlock(editor, n),
-    ...options,
-  }) || [editor, []];
-
-/**
- * Get the point from a location (default: selection).
- * If the location is a range, get the anchor point.
- * If the location is a path, get the point at this path with offset 0.
- * If `focus` is true, get the focus point.
- */
-export const getPointFromLocation = (
-  editor,
-  { at = editor.selection, focus } = {},
-) => {
-  let point;
-  if (Range.isRange(at)) point = !focus ? at.anchor : at.focus;
-  if (Point.isPoint(at)) point = at;
-  if (Path.isPath(at)) point = { path: at, offset: 0 };
-
-  return point;
-};
-
-/**
- * Get the range from the start of the block above a location (default: selection) to the location.
- */
-export const getRangeFromBlockStart = (editor, options = {}) => {
-  const [, path] = getBlockAbove(editor, options);
-
-  const start = Editor.start(editor, path);
-
-  const focus = getPointFromLocation(editor, options);
-
-  if (!focus) return;
-
-  return { anchor: start, focus };
-};
-
-/**
- * Enables support for autoformatting actions.
- * Once a markup rule is validated, it does not check the following rules.
- */
-export const withAutoformat = ({ rules }) => (editor) => {
-  const { insertText } = editor;
-
-  editor.insertText = (text) => {
-    if (!isCollapsed(editor.selection)) return insertText(text);
-
-    for (const {
-      trigger = ' ',
-      type,
-      markup,
-      preFormat,
-      format,
-      mode,
-      between,
-      ignoreTrim,
-      insertTrigger,
-    } of rules) {
-      const triggers = castArray(trigger);
-
-      // Check trigger
-      if (!triggers.includes(text)) continue;
-
-      const markups = castArray(markup);
-
-      const rangeFromBlockStart = getRangeFromBlockStart(editor);
-      const textFromBlockStart = getText(editor, rangeFromBlockStart);
-
-      const valid = () => insertTrigger && insertText(text);
-
-      if (markups.includes(textFromBlockStart)) {
-        // Start of the block
-        autoformatBlock(editor, type, rangeFromBlockStart, {
-          preFormat,
-          format,
-        });
-        return valid();
-      }
-
-      if (mode === 'inline-block') {
-        if (
-          autoformatInlineBlock(editor, { preFormat, markup, format, type })
-        ) {
-          return valid();
-        }
-      }
-
-      if (mode === 'inline') {
-        if (
-          autoformatInline(editor, {
-            type,
-            between,
-            ignoreTrim,
-            markup: Array.isArray(markup) ? markup[0] : markup,
-          })
-        ) {
-          return valid();
-        }
-      }
-    }
-
-    insertText(text);
-  };
-
-  return editor;
-};

package/packages/volto-slate/src/editor/plugins/Markdown/index.js

@@ -1,28 +0,0 @@
-// import React from 'react';
-import { withAutoformat } from './extensions';
-import { autoformatRules } from './constants';
-// import PluginSidebar from '@plone/volto-slate/blocks/Text/PluginSidebar';
-
-export default function install(config) {
-  const { slate } = config.settings;
-
-  slate.extensions = [
-    ...(slate.extensions || []),
-    withAutoformat({ rules: autoformatRules }),
-  ];
-
-  // TODO: this way the markdown shortcuts' explanation appears
-  // only when one of the toolbars is visible, so I commented this out:
-  // slate.buttons.markdownSupport = (props) => (
-  //   <PluginSidebar selected={true}>
-  //     <strong>Markdown</strong>
-  //   </PluginSidebar>
-  // );
-  // slate.toolbarButtons = [...(slate.toolbarButtons || []), 'markdownSupport'];
-  // slate.expandedToolbarButtons = [
-  //   ...(slate.expandedToolbarButtons || []),
-  //   'markdownSupport',
-  // ];
-
-  return config;
-}

package/packages/volto-slate/src/editor/plugins/Markdown/utils.js

@@ -1,198 +0,0 @@
-import { Editor, Range, Transforms, Text, Node } from 'slate';
-import {
-  getMaxRange,
-  selectAll,
-  getSelectionNodesArrayByType,
-} from '@plone/volto-slate/utils';
-import { P, LI, UL, OL } from '@plone/volto-slate/constants';
-
-export function unwrapNodesByType(editor, types, options = {}) {
-  Transforms.unwrapNodes(editor, {
-    match: (n) => types.includes(n.type),
-    ...options,
-  });
-}
-
-export function unwrapList(
-  editor,
-  willWrapAgain,
-  { typeUl = UL, typeOl = OL, typeLi = LI, unwrapFromList = false } = {},
-) {
-  // TODO: toggling from one list type to another should keep the structure untouched
-  if (
-    editor.selection &&
-    Range.isExpanded(editor.selection) &&
-    unwrapFromList
-  ) {
-    if (unwrapFromList) {
-      // unwrapNodesByType(editor, [typeLi]);
-      // unwrapNodesByType(editor, [typeUl, typeOl], {
-      //   split: true,
-      // });
-      // else ...
-    }
-  } else {
-    unwrapNodesByType(editor, [typeLi], { at: getMaxRange(editor) });
-    unwrapNodesByType(editor, [typeUl, typeOl], {
-      at: getMaxRange(editor),
-    });
-  }
-
-  if (!willWrapAgain) {
-    convertAllToParagraph(editor);
-  }
-}
-
-export function convertAllToParagraph(editor) {
-  // let count = Array.from(Node.children(editor, [])).length;
-  let result = recursive(editor);
-  compactAndNormalize(result);
-
-  Editor.withoutNormalizing(editor, () => {
-    Transforms.removeNodes(editor, { at: [0 /* , i */] });
-    Transforms.insertNodes(
-      editor,
-      { type: P, children: [{ text: '' }] },
-      { at: [0] },
-    );
-    Transforms.insertFragment(editor, [...result], { at: [0] });
-  });
-}
-
-export function recursive(myNode) {
-  if (Text.isText(myNode)) return [{ ...myNode }];
-
-  let output = [];
-  let children = Node.children(myNode, []);
-
-  for (const [node] of children) {
-    if (Text.isText(node)) {
-      output.push({ ...node });
-    } else {
-      let count = Array.from(node.children).length;
-      for (let i = 0; i < count; ++i) {
-        let o = recursive(node.children[i]);
-        for (let j = 0; j < o.length; ++j) {
-          output.push(o[j]);
-        }
-      }
-    }
-  }
-
-  return output;
-}
-
-// TODO: make this add a space between any two Text instances
-export function compactAndNormalize(result) {
-  for (let i = 0; i < result.length - 1; ++i) {
-    let a = result[i];
-    let b = result[i + 1];
-
-    let m = textsMatch(a, b);
-    if (m) {
-      result[i].text += b.text;
-      result.splice(i + 1, 1);
-    }
-  }
-
-  if (result.length === 0) {
-    result.push({ text: '' });
-  }
-
-  return;
-}
-
-// TODO: optimize this:
-export function textsMatch(a, b) {
-  const aKeys = Object.keys(a);
-  const bKeys = Object.keys(b);
-
-  for (let x in a) {
-    if (x === 'text') continue;
-    if (aKeys.includes(x) && bKeys.includes(x)) {
-      if (a[x] !== b[x]) {
-        return false;
-      }
-    }
-  }
-
-  for (let x in b) {
-    if (x === 'text') continue;
-    if (aKeys.includes(x) && bKeys.includes(x)) {
-      if (a[x] !== b[x]) {
-        return false;
-      }
-    }
-  }
-
-  return true;
-}
-
-/**
- * @summary Toggles list type.
- * @todo need to redo this
- * @todo should preserve structure of list if going from a list type to another
- * @todo allow nested lists, currently the Markdown plugin uses this function but crashes when making a UL in an OL's LI
- * @param {Editor} editor
- * @param {object} options
- */
-export function toggleList(
-  editor,
-  {
-    typeList,
-    typeUl = UL,
-    typeOl = OL,
-    typeLi = LI,
-    typeP = P,
-    isBulletedActive = false,
-    isNumberedActive = false,
-  },
-) {
-  // TODO: set previous selection (not this 'select all' command) after toggling list (in all three cases: toggling to numbered, bulleted or none)
-  selectAll(editor);
-
-  // const isActive = isNodeInSelection(editor, [typeList]);
-
-  // if (the list type/s are unset) {
-
-  const B = typeList === UL;
-  const N = typeList === OL;
-
-  if (N && !isBulletedActive && !isNumberedActive) {
-    convertAllToParagraph(editor);
-    // go on with const willWrapAgain etc.
-  } else if (N && !isBulletedActive && isNumberedActive) {
-    convertAllToParagraph(editor);
-    return;
-  } else if (N && isBulletedActive && !isNumberedActive) {
-    // go on with const willWrapAgain etc.
-  } else if (B && !isBulletedActive && !isNumberedActive) {
-    convertAllToParagraph(editor);
-    // go on with const willWrapAgain etc.
-  } else if (B && !isBulletedActive && isNumberedActive) {
-    // go on with const willWrapAgain etc.
-  } else if (B && isBulletedActive && !isNumberedActive) {
-    convertAllToParagraph(editor);
-    return;
-  }
-
-  selectAll(editor);
-
-  const willWrapAgain = !isBulletedActive;
-  unwrapList(editor, willWrapAgain, { unwrapFromList: isBulletedActive });
-
-  // a new list is created and everything in the editor is put in it;
-  // `children` property is added automatically as an empty array then
-  // normalized
-  const list = { type: typeList };
-  Transforms.wrapNodes(editor, list);
-
-  // get all the selected paragraphs
-  const nodes = getSelectionNodesArrayByType(editor, typeP);
-
-  // for each paragraph
-  for (const [, path] of nodes) {
-    // convert the paragraph to a list item
-    Transforms.setNodes(editor, { type: LI }, { at: path });
-  }
-}