onchain-lexical-instance 0.0.1

package/OnchainLexicalInstance.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+module.exports = require('./dist/OnchainLexicalInstance.js');

package/README.md

@@ -0,0 +1 @@
+# `@onchain/lexical-instance`

package/flow/OnchainLexicalMarkdown.js.flow

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+export { $createBarDecoratorNode, $isBarDecoratorNode, BarDecoratorNode } from '../src/bar'
+export { $createInstanceNode, $isInstanceNode, InstanceNode } from '../src/base'
+export { $createInstanceCodeNode, $isInstanceCodeNode, InstanceCodeNode } from '../src/code'
+export { InstanceParagraphType } from '../src/const'
+export { $createInstanceHeadingNode, InstanceHeadingNode } from '../src/heading'
+export { InstancePlugin } from '../src/instancePlugin'
+export { $createInstanceListNode, $isInstanceListNode, InstanceListNode } from '../src/list'
+export * from '../src/list/formatList'
+export { $createInstanceListItemNode, $isInstanceListItemNode, InstanceListItemNode } from '../src/list/item'
+export * from '../src/list/utils'
+export { getInstanceTransformers } from '../src/MarkdownTransformers'
+export { $createNumberDecoratorNode, $isNumberDecoratorNode, NumberDecoratorNode } from '../src/number'
+export { $createInstanceParagraphNode, $isEmptyInstanceParagraphNode, $isEmptyParagraphNode,$isInstanceParagraphNode, InstanceParagraphNode } from '../src/paragraph'
+export { $createInstanceTitleNode, $isInstanceTitleNode, InstanceTitleNode } from '../src/paragraph/title'
+export { $createInstanceQuoteNode, $isInstanceQuoteNode, InstanceQuoteNode } from '../src/quote'

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "onchain-lexical-instance",
+  "description": "This package provides the list feature for OnchainLexical.",
+  "keywords": [
+    "lexical",
+    "editor",
+    "instance"
+  ],
+  "license": "MIT",
+  "version": "0.0.1",
+  "types": "index.d.ts",
+  "dependencies": {
+    "@lexical/code": "^0.30.0",
+    "@lexical/list": "^0.30.0",
+    "@lexical/react": "^0.30.0",
+    "@lexical/rich-text": "^0.30.0",
+    "@lexical/selection": "^0.30.0",
+    "@lexical/table": "^0.30.0",
+    "@lexical/utils": "^0.30.0",
+    "lexical": "0.30.0",
+    "onchain-utility": "^0.0.1"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./src/index.ts",
+        "default": "./dist/OnchainLexicalInstance.mjs"
+      },
+      "require": {
+        "types": "./src/index.ts",
+        "default": "./dist/OnchainLexicalInstance.js"
+      }
+    }
+  }
+}

package/src/bar/index.tsx

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type React from 'react';
+
+import {
+  $applyNodeReplacement,
+  BaseSelection,
+  DecoratorNode,
+  EditorConfig,
+  LexicalEditor,
+  LexicalNode,
+  SerializedLexicalNode,
+  Spread,
+} from 'lexical';
+
+import {$createInstanceNode} from '../base';
+import Styles from './styles.module.less';
+
+export type SerializedPlaceholderDecoratorNode = Spread<
+  {
+    __text: string;
+  },
+  SerializedLexicalNode
+>;
+
+export class BarDecoratorNode extends DecoratorNode<JSX.Element> {
+  __text = 'bar';
+  static getType() {
+    return 'Bar';
+  }
+
+  static clone(node: BarDecoratorNode) {
+    return new BarDecoratorNode(node.__key);
+  }
+
+  static importJSON(
+    serializedNode: SerializedPlaceholderDecoratorNode,
+  ): BarDecoratorNode {
+    return $createBarDecoratorNode().updateFromJSON(serializedNode);
+  }
+
+  constructor(key?: string) {
+    super(key);
+  }
+
+  createDOM(config: EditorConfig) {
+    const div = document.createElement('div');
+    div.classList.add(Styles['instance-bar']);
+    return div;
+  }
+
+  updateDOM() {
+    return false; // 静态内容无需更新
+  }
+
+  remove(preserveEmptyParent?: boolean): void {}
+
+  collapseAtStart(): true {
+    return true;
+  }
+
+  isSelected(selection?: null | BaseSelection): boolean {
+    return false;
+  }
+
+  onInsertBlock(e: React.MouseEvent, editor: LexicalEditor) {
+    if (!editor) {
+      return;
+    }
+
+    editor.update(() => {
+      const node = this.getParent();
+      if (!node) {
+        return;
+      }
+      const pNode = $createInstanceNode();
+      if (e.altKey || e.ctrlKey) {
+        node.append(pNode);
+        // node.insertBefore(pNode);
+      } else {
+        node.insertAfter(pNode);
+        // node.append(pNode)
+      }
+      pNode.select();
+    });
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {
+    return (
+      <div>
+        <span>⭕</span>
+        <span>link</span>
+        <button onClick={(e) => this.onInsertBlock(e, editor)}>+</button>
+      </div>
+    );
+  }
+}
+
+/** 创建 Bar 装饰节点 */
+export function $createBarDecoratorNode(): BarDecoratorNode {
+  return $applyNodeReplacement(new BarDecoratorNode());
+}
+
+/** 是否是 Bar 装饰节点 */
+export function $isBarDecoratorNode(
+  node: LexicalNode | null | undefined,
+): node is BarDecoratorNode {
+  return node instanceof BarDecoratorNode;
+}

package/src/bar/styles.module.less

@@ -0,0 +1,19 @@
+@PaddingLeft: 23px;
+.instance-bar {
+  user-select: none;
+  position: absolute;
+  left: -@PaddingLeft * 2;
+  padding-left: @PaddingLeft;
+  > div {
+    display: flex;
+    flex-direction: column;
+    > * {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+    > span:nth-of-type(1) {
+      height: 40px;
+    }
+  }
+}

package/src/base.module.less

@@ -0,0 +1,7 @@
+.instance {
+  margin-bottom: 10px;
+  > p:nth-of-type(1) {
+    word-wrap: normal;
+    border-bottom: 1px solid #000;
+  }
+}

package/src/base.ts

@@ -0,0 +1,325 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type {InstanceParagraphNode} from './paragraph';
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  LexicalNode,
+  NodeKey,
+} from 'lexical';
+
+import {
+  $applyNodeReplacement,
+  EditorConfig,
+  ElementFormatType,
+  ElementNode,
+  isHTMLElement,
+  LexicalEditor,
+  RangeSelection,
+  SerializedElementNode,
+  setNodeIndentFromDOM,
+  Spread,
+} from 'lexical';
+
+import {$createBarDecoratorNode, $isBarDecoratorNode} from './bar';
+import Styles from './base.module.less';
+import {InstanceParagraphType} from './const';
+import {$createNumberDecoratorNode, $isNumberDecoratorNode} from './number';
+import {
+  $createInstanceParagraphNode,
+  $isEmptyParagraphNode,
+  $isInstanceParagraphNode,
+} from './paragraph';
+import {Instance} from './types';
+import {getCachedClassNameArray} from './utils';
+
+/** TODO 数据类型 */
+export type SerializedInstanceNode = Spread<
+  {
+    textFormat: number;
+    textStyle: string;
+  },
+  SerializedElementNode
+>;
+
+/** @noInheritDoc */
+
+export class InstanceNode extends ElementNode {
+  // 标记初始段落数量
+  static DEFAULT_PARAGRAPHS = 3;
+  __instance: Instance | undefined;
+  constructor(instance?: Instance, isBase?: boolean, key?: NodeKey) {
+    super(key);
+    this.__instance = instance;
+    // 初始化时自动添加 3 个空段落
+    if (!key && this.isEmpty()) {
+      this.append(
+        $createBarDecoratorNode(),
+        $createNumberDecoratorNode(this.__instance),
+        ...Array(isBase ? 1 : InstanceNode.DEFAULT_PARAGRAPHS)
+          .fill(null)
+          .map((_i) => $createInstanceParagraphNode()),
+      );
+    }
+  }
+
+  static getType(): string {
+    return 'Instance';
+  }
+
+  static clone(node: InstanceNode): InstanceNode {
+    return new InstanceNode(node.__instance, false, node.__key);
+  }
+
+  static canBeEmpty() {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      p: (node: Node) => ({
+        conversion: $convertInstanceElement,
+        priority: 0,
+      }),
+    };
+  }
+
+  static importJSON(serializedNode: SerializedInstanceNode): InstanceNode {
+    return $createInstanceNode().updateFromJSON(serializedNode);
+  }
+
+  exportDOM(editor: LexicalEditor): DOMExportOutput {
+    const {element} = super.exportDOM(editor);
+
+    if (isHTMLElement(element)) {
+      if (this.isEmpty()) {
+        element.append(document.createElement('br'));
+      }
+
+      const formatType = this.getFormatType();
+      element.style.textAlign = formatType;
+    }
+
+    return {
+      element,
+    };
+  }
+
+  exportJSON(): SerializedInstanceNode {
+    return {
+      ...super.exportJSON(),
+      // These are included explicitly for backwards compatibility
+      textFormat: this.getTextFormat(),
+      textStyle: this.getTextStyle(),
+    };
+  }
+
+  // View
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div');
+    const classNames = [
+      Styles.instance,
+      getCachedClassNameArray(config.theme, 'instance') ?? [],
+    ];
+    if (classNames !== undefined) {
+      const domClassList = dom.classList;
+      domClassList.add(...classNames.flat(1));
+    }
+    dom.style.position = 'relative';
+    dom.setAttribute('instance', 'true');
+    dom.setAttribute('key', this.getKey());
+    return dom;
+  }
+
+  updateDOM(
+    prevNode: InstanceNode,
+    dom: HTMLElement,
+    config: EditorConfig,
+  ): boolean {
+    return false;
+  }
+
+  // Mutation
+  insertNewAfter(
+    rangeSelection: RangeSelection,
+    restoreSelection: boolean,
+  ): InstanceNode {
+    const newElement = $createInstanceNode();
+    newElement.setTextFormat(rangeSelection.format);
+    newElement.setTextStyle(rangeSelection.style);
+    const direction = this.getDirection();
+    newElement.setDirection(direction);
+    newElement.setFormat(this.getFormatType());
+    newElement.setStyle(this.getStyle());
+    this.insertAfter(newElement, restoreSelection);
+    return newElement;
+  }
+
+  getParagraphChildren<T extends LexicalNode>(): Array<T> {
+    return super
+      .getChildren<T>()
+      .filter(
+        (node) =>
+          !$isBarDecoratorNode(node) &&
+          !$isNumberDecoratorNode(node) &&
+          !$isInstanceNode(node),
+      );
+  }
+
+  getSerialNumber(): string {
+    const children =
+      this.getParent()
+        ?.getChildren()
+        .filter((node) => $isInstanceNode(node)) || [];
+    if (children.length) {
+      const index = String(children.findIndex((node) => node === this)! + 1);
+      const ancestor = this.getParent();
+      if ($isInstanceNode(ancestor)) {
+        return `${ancestor.getSerialNumber()}-${index}`;
+      } else {
+        return index;
+      }
+    }
+    return '';
+  }
+
+  collapseAtStart(): boolean {
+    const children = this.getParagraphChildren<InstanceParagraphNode>();
+    // If we have an empty (trimmed) first paragraph and try and remove it,
+    // delete the paragraph as long as we have another sibling to go to
+    if (children.every((child) => $isEmptyParagraphNode(child))) {
+      const nextSibling = this.getNextSibling();
+      const prevSibling = this.getPreviousSibling();
+      const result =
+        /** 下一个是否存在 */ this.handleRemove(nextSibling) ||
+        /** 上一个是否存在 */ this.handleRemove(prevSibling, false);
+      return result;
+    }
+    return false;
+  }
+  handleRemove(sibling: LexicalNode | null, isNext = true) {
+    if (sibling !== null) {
+      sibling.selectEnd();
+      if ($isInstanceNode(sibling)) {
+        const children = sibling.getChildren();
+        let anchor = children[0];
+        if (!isNext) {
+          anchor = children[children.length - 1];
+        }
+        anchor.selectEnd();
+      }
+      this.remove();
+      return true;
+    }
+    return false;
+  }
+
+  select(_anchorOffset?: number, _focusOffset?: number): RangeSelection {
+    const firstChild = this.getChildAtIndex(InstanceParagraphType.Title);
+    if (firstChild) {
+      return firstChild.selectEnd();
+    }
+    return super.select(_anchorOffset, _focusOffset);
+  }
+  isShadowRoot() {
+    return true;
+  }
+}
+
+function $convertInstanceElement(element: HTMLElement): DOMConversionOutput {
+  const node = $createInstanceNode();
+  if (element.style) {
+    node.setFormat(element.style.textAlign as ElementFormatType);
+    setNodeIndentFromDOM(element, node);
+  }
+  return {node};
+}
+
+export function $createInstanceNode(instance?: Instance): InstanceNode {
+  return $applyNodeReplacement(new InstanceNode(instance));
+}
+
+export function $createBaseInstanceNode(instance?: Instance): InstanceNode {
+  return $applyNodeReplacement(new InstanceNode(instance, true));
+}
+
+export function $isInstanceNode(
+  node: LexicalNode | null | undefined,
+): node is InstanceNode {
+  return node instanceof InstanceNode;
+}
+
+export function $remove(node: LexicalNode) {
+  const parent = node.getParent();
+  if ($isInstanceNode(parent)) {
+    const paragraph = parent.getParagraphChildren();
+    const removedSize = paragraph.length - 1;
+    if (removedSize < InstanceNode.DEFAULT_PARAGRAPHS) {
+      if ($isInstanceParagraphNode(node.getPreviousSibling())) {
+        node.selectPrevious();
+      } else {
+        const allEmpty = $checkAllParagraphsEmpty(parent);
+        if (allEmpty) {
+          const isRemove = parent.collapseAtStart();
+          if (!isRemove) {
+            node.selectEnd();
+          }
+        } else {
+          node.selectEnd();
+        }
+      }
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 删除某个节点时 需要检测是否需要固定段落 */
+export function $removedFixedParagraph(
+  node: ElementNode,
+  remove: () => void,
+  isKeepPgh: boolean = false,
+) {
+  if ($remove(node)) {
+    if (isKeepPgh) {
+      $keepParagraph(node, remove);
+    } else {
+      remove();
+    }
+  } else {
+    $replaceWithParagraph(node);
+  }
+}
+
+/** 删除某个节点时 保留当前段落 */
+export function $keepParagraph(node: ElementNode, remove: () => void) {
+  const parent = node.getParent();
+  if ($isInstanceNode(parent)) {
+    $replaceWithParagraph(node).selectEnd();
+  } else {
+    remove();
+  }
+}
+
+/** 替换为段落 */
+function $replaceWithParagraph(node: ElementNode) {
+  const newElement = $createInstanceParagraphNode();
+  const children = node.getChildren();
+  children.forEach((child) => newElement.append(child));
+  node.replace(newElement);
+  return newElement;
+}
+
+/** 检查所有段落是否为空 */
+export function $checkAllParagraphsEmpty(parent: InstanceNode) {
+  return parent.getParagraphChildren().every((paragraph) => {
+    return paragraph.getTextContent().trim() === '';
+  });
+}