cosey 0.9.5 → 0.10.1

package/components/editor/plugins/serialize.js

@@ -0,0 +1,342 @@
+import { escapeHtml, hyphenate, parseStringStyle } from '@vue/shared';
+import { Text, Editor, Node as Node$1, Element } from 'slate-vue3/core';
+import { jsx } from 'slate-vue3/hyperscript';
+import { mapElementTypeTagName, tagToElementTypeMap } from '../types.js';
+import { INDENT_DELTA } from './render.js';
+import { deserializeList } from './list/deserialize.js';
+import { serializeList } from './list/serialize.js';
+import { toArray } from '../../../utils/array.js';
+import { isUndefined } from '../../../utils/is.js';
+
+function stringifyStyle(styles) {
+  let ret = "";
+  for (const key in styles) {
+    const value = styles[key];
+    if (typeof value === "number" || value) {
+      const normalizedKey = hyphenate(key);
+      ret += `${normalizedKey}:${value};`;
+    }
+  }
+  return ret;
+}
+function getStyleObject(element) {
+  const styleStr = element.getAttribute("style");
+  return styleStr ? parseStringStyle(styleStr) : {};
+}
+function serializeElement(tag, attrs, children) {
+  let sAttrs = attrs.filter((item) => item[1]).map(([key, value]) => {
+    return value === true ? key : `${key}="${value}"`;
+  }).join(" ");
+  sAttrs = sAttrs ? ` ${sAttrs}` : "";
+  return `<${tag}${sAttrs}${isUndefined(children) ? ` />` : `>${children || ""}</${tag}>`}`;
+}
+function getLanguageByClass(cls) {
+  return cls.match(/language-([^ ]+)/)?.[1] || "text";
+}
+function serializeText(node) {
+  let string = escapeHtml(node.text);
+  if (node.bold) {
+    string = serializeElement("strong", [], string);
+  }
+  if (node.italic) {
+    string = serializeElement("em", [], string);
+  }
+  if (node.underline) {
+    string = serializeElement("u", [], string);
+  }
+  if (node.strikethrough) {
+    string = serializeElement("s", [], string);
+  }
+  if (node.code) {
+    string = serializeElement("code", [], string);
+  }
+  if (node.superscript) {
+    string = serializeElement("sup", [], string);
+  }
+  if (node.subscript) {
+    string = serializeElement("sub", [], string);
+  }
+  return serializeElement(
+    "span",
+    [
+      [
+        "style",
+        stringifyStyle({
+          fontFamily: node.font,
+          fontSize: node.size,
+          color: node.color,
+          background: node.background
+        })
+      ]
+    ],
+    string
+  );
+}
+function serialize(node) {
+  if (Text.isText(node)) {
+    return serializeText(node);
+  }
+  if (Editor.isEditor(node)) {
+    return node.children.map((n) => serialize(n)).join("");
+  }
+  switch (node.type) {
+    case "image":
+      return serializeElement("img", [
+        ["src", node.url],
+        ["width", node.width],
+        ["height", node.height]
+      ]);
+    case "video":
+      return serializeElement("video", [
+        ["src", node.url],
+        ["width", node.width],
+        ["height", node.height],
+        ["controls", true]
+      ]);
+    case "code-block":
+      return serializeElement(
+        "pre",
+        [["class", `language-${node.language}`]],
+        node.children.map((n) => serialize(n)).join("\n")
+      );
+    case "formula":
+      return serializeElement(
+        mapElementTypeTagName[node.type],
+        [["data-value", node.formula.replace(/"/g, "&quot;")]],
+        ""
+      );
+    case "bulleted-list":
+    case "numbered-list":
+      return serializeList(node, serialize);
+  }
+  const children = node.children.map((n) => serialize(n)).join("");
+  switch (node.type) {
+    case "paragraph":
+    case "block-quote":
+    case "heading-one":
+    case "heading-two":
+    case "heading-three":
+    case "heading-four":
+    case "heading-five":
+    case "heading-six": {
+      return serializeElement(
+        mapElementTypeTagName[node.type],
+        [
+          [
+            "style",
+            stringifyStyle({
+              paddingLeft: node.indent ? node.indent * INDENT_DELTA + "px" : null,
+              textAlign: node.align
+            })
+          ]
+        ],
+        children
+      );
+    }
+    case "link":
+      return serializeElement(
+        "a",
+        [
+          ["href", node.url],
+          ["target", node.target]
+        ],
+        children
+      );
+    case "nested-bulleted-list":
+    case "nested-numbered-list":
+    case "nested-list-item":
+    case "list-item":
+    case "table":
+    case "table-head":
+    case "table-body":
+    case "table-row":
+    case "table-cell":
+      return serializeElement(mapElementTypeTagName[node.type], [], children);
+    default:
+      return children;
+  }
+}
+function deserialize(node, markAttributes = {}) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    if (!node.textContent || /^\s+$/.test(node.textContent)) return null;
+    return jsx("text", markAttributes, node.textContent.replace(/\n+/g, " ").replace(/ +/g, " "));
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return null;
+  }
+  const element = node;
+  const tagName = element.tagName;
+  switch (tagName) {
+    case "PRE":
+      return jsx(
+        "element",
+        {
+          type: "code-block",
+          language: getLanguageByClass(element.getAttribute("class") || "")
+        },
+        (element.textContent || "").split("\n").map(
+          (text) => jsx(
+            "element",
+            {
+              type: "code-line"
+            },
+            [jsx("text", {}, text)]
+          )
+        )
+      );
+    case "UL":
+    case "OL":
+      return deserializeList(element, deserialize);
+    case "math": {
+      const value = element.getAttribute("data-value");
+      if (value) {
+        return jsx(
+          "element",
+          {
+            type: "formula",
+            formula: value.replace(/&quot;/g, '"')
+          },
+          { text: "" }
+        );
+      } else {
+        return null;
+      }
+    }
+    case "IMG":
+      return jsx(
+        "element",
+        {
+          type: "image",
+          url: element.getAttribute("src"),
+          width: element.getAttribute("width"),
+          height: element.getAttribute("height")
+        },
+        { text: "" }
+      );
+    case "VIDEO":
+      return jsx(
+        "element",
+        {
+          type: "video",
+          url: element.getAttribute("src"),
+          width: element.getAttribute("width"),
+          height: element.getAttribute("height")
+        },
+        { text: "" }
+      );
+  }
+  const nodeAttributes = {
+    ...markAttributes
+  };
+  switch (tagName) {
+    case "STRONG":
+    case "B":
+      nodeAttributes.bold = true;
+      break;
+    case "EM":
+    case "I":
+      nodeAttributes.italic = true;
+      break;
+    case "U":
+      nodeAttributes.underline = true;
+      break;
+    case "DEL":
+    case "S":
+      nodeAttributes.strikethrough = true;
+      break;
+    case "CODE":
+      nodeAttributes.code = true;
+      break;
+    case "SUP":
+      nodeAttributes.superscript = true;
+      break;
+    case "SUB":
+      nodeAttributes.subscript = true;
+      break;
+  }
+  const children = Array.from(element.childNodes).map((node2) => deserialize(node2, nodeAttributes)).flat().filter(Boolean);
+  if (children.length === 0) {
+    children.push(jsx("text", nodeAttributes, ""));
+  }
+  switch (tagName) {
+    case "BODY":
+      return jsx("fragment", {}, children);
+    case "P":
+    case "BLOCKQUOTE":
+    case "H1":
+    case "H2":
+    case "H3":
+    case "H4":
+    case "H5":
+    case "H6": {
+      const attributes = {};
+      const style = getStyleObject(element);
+      if (style["padding-left"]) {
+        attributes.indent = parseFloat(style["padding-left"]) / INDENT_DELTA;
+      }
+      if (style["text-align"]) {
+        attributes.align = style["text-align"];
+      }
+      return jsx("element", { type: tagToElementTypeMap[tagName], ...attributes }, children);
+    }
+    case "LI":
+    case "TABLE":
+    case "THEAD":
+    case "TBODY":
+    case "TR":
+    case "TD":
+    case "TH": {
+      return jsx("element", { type: tagToElementTypeMap[tagName] }, children);
+    }
+    case "A":
+      return jsx(
+        "element",
+        {
+          type: "link",
+          target: element.getAttribute("target"),
+          url: element.getAttribute("href")
+        },
+        children
+      );
+    default:
+      return children;
+  }
+}
+function setContent(editor, html) {
+  const selection = editor.selection;
+  const fragment = editor.deserialize(html);
+  editor.select([]);
+  editor.delete();
+  editor.insertFragment(fragment);
+  if (selection) {
+    const anchorNode = Node$1.getIf(editor, selection.anchor.path);
+    const focusNode = Node$1.getIf(editor, selection.focus.path);
+    if (anchorNode && focusNode) {
+      editor.setSelection(selection);
+    }
+  }
+}
+function getContent(editor) {
+  const { children } = editor;
+  const isEmpty = children.length === 1 && Element.isElement(children[0]) && editor.isEmpty(children[0]);
+  return isEmpty ? "" : editor.serialize();
+}
+function withSerialize(editor) {
+  editor.serialize = () => {
+    return serialize(editor).trim();
+  };
+  editor.deserialize = (html) => {
+    const document = new DOMParser().parseFromString(html, "text/html");
+    const deserializedResult = deserialize(document.body);
+    return deserializedResult ? toArray(deserializedResult) : [];
+  };
+  editor.setContent = (html) => {
+    setContent(editor, html);
+  };
+  editor.getContent = () => {
+    return getContent(editor);
+  };
+  return editor;
+}
+
+export { withSerialize };

package/components/editor/plugins/size.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from 'slate-vue3/core';
+declare module 'slate-vue3/core' {
+    interface BaseEditor {
+        formatSize: (value: string) => void;
+        formatSizeDelta: (delta: number, callback: (numSize: number) => void) => void;
+    }
+}
+export declare function withSize(editor: Editor): import("../types").CustomEditor;

package/components/editor/plugins/size.js

@@ -0,0 +1,47 @@
+import { Range, Editor } from 'slate-vue3/core';
+import { DOMEditor } from 'slate-vue3/dom';
+import { getStyle } from '../../../utils/css.js';
+
+function formatSize(editor, value) {
+  if (!editor.selection) return;
+  if (Range.isCollapsed(editor.selection)) {
+    return;
+  }
+  Editor.addMark(editor, "size", value);
+}
+function formatSizeDelta(editor, delta, callback) {
+  if (!editor.selection) return;
+  if (Range.isCollapsed(editor.selection)) {
+    return;
+  }
+  const marks = Editor.marks(editor);
+  const size = marks ? marks["size"] : "";
+  let numSize = 14;
+  if (size) {
+    numSize = parseInt(size);
+  } else {
+    const domRange = DOMEditor.toDOMRange(editor, editor.selection);
+    let node = domRange.startContainer;
+    if (node.nodeType === 3) {
+      node = node.parentElement;
+    }
+    numSize = parseInt(getStyle(node, "fontSize"));
+  }
+  numSize += delta;
+  if (numSize < 0) {
+    numSize = 0;
+  }
+  Editor.addMark(editor, "size", numSize + "px");
+  callback(numSize);
+}
+function withSize(editor) {
+  editor.formatSize = (value) => {
+    formatSize(editor, value);
+  };
+  editor.formatSizeDelta = (delta, callback) => {
+    formatSizeDelta(editor, delta, callback);
+  };
+  return editor;
+}
+
+export { withSize };

package/components/editor/plugins/table.d.ts

@@ -0,0 +1,21 @@
+import { Editor, Path } from 'slate-vue3/core';
+import { type TableElement, type TableCellElement } from '../types';
+declare module 'slate-vue3/core' {
+    interface BaseEditor {
+        insertTable: (rowCount: number, columnCount: number) => void;
+        insertRow: (tablePath: Path, cellPath: Path, isNext?: boolean) => void;
+        insertRowAbove: (tablePath: Path, cellPath: Path) => void;
+        insertRowBelow: (tablePath: Path, cellPath: Path) => void;
+        insertColumn: (tablePath: Path, cellPath: Path, isNext?: boolean) => void;
+        insertColumnLeft: (tablePath: Path, cellPath: Path) => void;
+        insertColumnRight: (tablePath: Path, cellPath: Path) => void;
+        deleteRow: (tablePath: Path, cellPath: Path) => void;
+        deleteColumn: (tablePath: Path, cellPath: Path) => void;
+        deleteTable: (tablePath: Path) => void;
+        moveToHead: (tablePath: Path, cellPath: Path) => void;
+        moveToBody: (tablePath: Path, cellPath: Path) => void;
+        isTable: (node: any) => node is TableElement;
+        isTableCell: (node: any) => node is TableCellElement;
+    }
+}
+export declare function withTable(editor: Editor): import("../types").CustomEditor;