onchain-lexical-instance 0.0.2 → 0.0.4

package/package.json

@@ -7,8 +7,12 @@
     "instance"
   ],
   "license": "MIT",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "types": "index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "dependencies": {
     "@lexical/code": "^0.30.0",
     "@lexical/hashtag": "^0.30.0",
@@ -19,10 +23,10 @@
     "@lexical/table": "^0.30.0",
     "@lexical/utils": "^0.30.0",
     "lexical": "0.30.0",
-    "onchain-lexical-context": "^0.0.2",
-    "onchain-lexical-ui": "^0.0.2",
-    "onchain-utility": "^0.0.3",
-    "onchain-lexical-markdown": "^0.0.2"
+    "onchain-lexical-context": "^0.0.3",
+    "onchain-lexical-markdown": "^0.0.3",
+    "onchain-lexical-ui": "^0.0.3",
+    "onchain-utility": "^0.0.4"
   },
   "sideEffects": false,
   "exports": {

package/src/bar/BarComponent.tsx

@@ -11,9 +11,9 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {useInstanceConfig} from 'onchain-lexical-context/instanceConfig';
 import {useSettings} from 'onchain-lexical-context/settings';
 import DropDown, {DropDownItem} from 'onchain-lexical-ui/DropDown';
-import {Icon} from 'onchain-lexical-ui/Icon';
+import {Icon, StaticIcon} from 'onchain-lexical-ui/Icon';
 import {translateI18n} from 'onchain-utility';
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, useState} from 'react';
 
 import {OPEN_CREATE_WINDOW} from '../const';
 import {Instance} from '../types';
@@ -26,8 +26,10 @@ const Bar = (props: {
 }): JSX.Element => {
   const {insNodeKey, instance} = props;
   const [editor] = useLexicalComposerContext();
-  const {preview, selectedInstance, getInstanceIcon} = useInstanceConfig();
+  const {preview, selectedInstance, getInstanceIcon, components} =
+    useInstanceConfig();
   const {extra} = useSettings();
+  const [open, setOpen] = useState(false);
 
   // icon-front-link1
   const isSelected = useMemo(() => {
@@ -72,6 +74,12 @@ const Bar = (props: {
     return 'demand1';
   }, [instance]);
 
+  const Components = useMemo(() => {
+    return {
+      ...components,
+    };
+  }, [components]);
+
   const hasChildren = !!instance?.children?.length || instance?.insBom;
 
   return (
@@ -83,11 +91,33 @@ const Bar = (props: {
         />
         {!preview && extra.showLeftToolbar !== false ? (
           <>
-            <Icon
-              className={`${Styles.hover} ${Styles.link}`}
-              type="icon-front-link1"
-            />
+            <span
+              className={`${Styles.link} ${
+                open ? Styles.hiddenLinkCount : ''
+              }`}>
+              <DropDown
+                arrow={true}
+                showIcon={false}
+                disabled={!instance?.trackLinkCount}
+                stopCloseOnClickSelf={true}
+                buttonLabel={
+                  // [TODO] 显示 trackLinkCount
+                  <div>
+                    <i>{instance?.trackLinkCount || ''}</i>
+                    <StaticIcon
+                      className={`${Styles.hover}`}
+                      type="icon-front-link1"
+                    />
+                  </div>
+                }
+                onOpen={setOpen}>
+                {Components.TrackLinkList && instance ? (
+                  <Components.TrackLinkList number={instance.number!} />
+                ) : null}
+              </DropDown>
+            </span>
             <DropDown
+              arrow={true}
               showIcon={false}
               buttonLabel={
                 <Icon className={Styles.hover} type="icon-front-xinzeng1" />

package/src/bar/index.tsx

@@ -25,7 +25,7 @@ import {$createInstanceNode, InstanceNode} from '../base';
 import {$getInstanceNodeByChild} from '../utils';
 import Bar from './BarComponent';
 
-export type SerializedPlaceholderDecoratorNode = Spread<
+export type SerializedBarDecoratorNode = Spread<
   {
     __text: string;
   },
@@ -47,7 +47,7 @@ export class BarDecoratorNode extends DecoratorNode<JSX.Element> {
   }
 
   static importJSON(
-    serializedNode: SerializedPlaceholderDecoratorNode,
+    serializedNode: SerializedBarDecoratorNode,
   ): BarDecoratorNode {
     return $createBarDecoratorNode().updateFromJSON(serializedNode);
   }

package/src/bar/styles.module.less

@@ -11,7 +11,33 @@
   flex-direction: column;
   align-items: center;
   .link {
-    margin-bottom: 10px;
+    margin-bottom: 6px;
+    > button > span > div {
+      position: relative;
+      > i {
+        position: absolute;
+        font-size: 10px;
+        color: #fff;
+        right: -2px;
+        bottom: -2px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        display: flex;
+        font-style: normal;
+        align-items: center;
+        justify-content: center;
+        background-color: @themeColor;
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+  .hiddenLinkCount {
+    > button > span > div > i {
+      display: none;
+    }
   }
   > * {
     display: inline-flex;

package/src/const.ts

@@ -64,6 +64,11 @@ export const numberNodeKey = new NumberNodeKey();
 
 export const fixedAddress = new Map<string, {value: Instance}>();
 
+export const internalLinkNameUpdateMap = new Map<
+  string,
+  Map<string, () => void>
+>();
+
 export const OPEN_CREATE_WINDOW: LexicalCommand<{
   isAddChildLevel: boolean;
   number: string;
@@ -77,3 +82,6 @@ export const ADD_NEW_INSTANCE_NODE: LexicalCommand<{
 }> = createCommand('ADD_NEW_INSTANCE_NODE');
 
 export const DELETE_INSTANCE_NODE = 'DELETE_INSTANCE_NODE';
+
+export const INSERT_PARAMETERS: LexicalCommand<undefined> =
+  createCommand('INSERT_PARAMETERS');

package/src/index.ts

@@ -63,6 +63,11 @@ export {
   type InlineImagePayload,
 } from './image/InlineImageNode';
 export {InstancePlugin} from './instancePlugin';
+export {
+  $createInternalLinkNode,
+  $isInternalLinkNode,
+  InternalLinkNode,
+} from './internalLink';
 export {$createKeywordNode, $isKeywordNode, KeywordNode} from './keyword';
 export {
   $createInstanceListNode,

package/src/internalLink/index.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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 {
+  $applyNodeReplacement,
+  EditorConfig,
+  LexicalEditor,
+  SerializedTextDecoratorNode,
+  Spread,
+  TextDecoratorNode,
+} from 'lexical';
+import React from 'react';
+
+import InternalLinkComponent from './internalLinkComponent';
+
+export type SerializedInternalNode = Spread<
+  {
+    __number: string;
+  },
+  SerializedTextDecoratorNode
+>;
+export class InternalLinkNode extends TextDecoratorNode<React.ReactNode> {
+  __number: string;
+  static getType(): string {
+    return 'InternalLink';
+  }
+
+  static clone(node: InternalLinkNode) {
+    return new InternalLinkNode(node.__number, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedInternalNode): InternalLinkNode {
+    return $createInternalLinkNode(serializedNode.__number).updateFromJSON(
+      serializedNode,
+    );
+  }
+
+  constructor(number: string, key?: string) {
+    super(key);
+    this.__number = number;
+  }
+
+  updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean {
+    return super.updateDOM(prevNode, dom, config);
+  }
+
+  collapseAtStart(): true {
+    return true;
+  }
+
+  isInline(): boolean {
+    return true;
+  }
+
+  decorate(editor: LexicalEditor, config: EditorConfig): JSX.Element {
+    return (
+      <InternalLinkComponent
+        editor={editor}
+        config={config}
+        self={this}
+        number={this.__number}
+        nodeKey={this.getKey()}
+      />
+    );
+  }
+}
+
+export function $createInternalLinkNode(number: string): InternalLinkNode {
+  return $applyNodeReplacement(new InternalLinkNode(number));
+}
+
+export function $isInternalLinkNode(
+  node: InternalLinkNode | null | undefined,
+): node is InternalLinkNode {
+  return node instanceof InternalLinkNode;
+}

package/src/internalLink/internalLinkComponent.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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.
+ *
+ */
+/* eslint-disable @lexical/rules-of-lexical */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+import type {InternalLinkNode} from '.';
+
+import {EditorConfig, LexicalEditor} from 'lexical';
+import {useCallback, useEffect, useState} from 'react';
+
+import {internalLinkNameUpdateMap} from '../const';
+import {$getInstanceNodeByNumber, $scrollTo, getLatestValue} from '../utils';
+import Styles from './styles.module.less';
+
+export default function InternalLinkComponent({
+  self,
+  editor,
+  config,
+  number,
+  nodeKey,
+}: {
+  self: InternalLinkNode;
+  number: string;
+  nodeKey: string;
+  editor: LexicalEditor;
+  config: EditorConfig;
+}) {
+  const [name, setName] = useState<string>();
+  const [serial, setSerial] = useState<string>();
+
+  const update = useCallback(function () {
+    editor.read(() => {
+      const node = $getInstanceNodeByNumber(number)!;
+      setName(getLatestValue(node.__instance.value, 'insDesc'));
+      setSerial(node.getSerialNumber());
+    });
+  }, []);
+
+  useEffect(() => {
+    update();
+  }, []);
+
+  useEffect(() => {
+    let timeout = 0;
+    let map: Map<string, () => void>;
+    const debounceUpdate = () => {
+      clearTimeout(timeout);
+      timeout = window.setTimeout(() => {
+        update();
+      }, 100);
+    };
+    if (internalLinkNameUpdateMap.has(number)) {
+      map = internalLinkNameUpdateMap.get(number)!.set(nodeKey, debounceUpdate);
+    } else {
+      map = new Map([[nodeKey, debounceUpdate]]);
+      internalLinkNameUpdateMap.set(number, map);
+    }
+    return () => {
+      map.delete(number);
+    };
+  }, []);
+
+  if (name) {
+    return (
+      <span
+        className={`${Styles.internalLink}`}
+        onClick={() =>
+          editor.update(() => {
+            $scrollTo(number);
+          })
+        }>
+        <span>{serial}</span>
+        <span>{name}</span>
+      </span>
+    );
+  } else {
+    return null;
+  }
+}

package/src/internalLink/styles.module.less

@@ -0,0 +1,15 @@
+@import './const.less';
+
+.internalLink {
+  cursor: pointer;
+  color: @themeColor;
+  > span:nth-of-type(1):not(:empty) {
+    padding-right: 4px;
+  }
+  &:hover {
+    color: @themeColor;
+    > span:nth-of-type(2) {
+      text-decoration: underline;
+    }
+  }
+}

package/src/paragraph/title.ts

@@ -29,7 +29,7 @@ import {
 } from 'lexical';
 
 import {$isInstanceNode} from '../base';
-import {Placeholder} from '../const';
+import {internalLinkNameUpdateMap, Placeholder} from '../const';
 import {InstanceHeadingNode, isGoogleDocsTitle} from '../heading';
 import {
   $createPlaceholderDecoratorNode,
@@ -137,6 +137,10 @@ export class InstanceTitleNode extends InstanceHeadingNode {
     if (instanceNode && instanceNode.__instance.value) {
       const text = this.getTextContent().trim();
       setInstanceAttrValue(instanceNode.__instance.value, 'insDesc', text);
+      internalLinkNameUpdateMap
+        .get(instanceNode.__instance.value.number!)
+        ?.values()
+        .forEach((update) => update());
     }
     return super.updateDOM(prevNode, dom, config);
   }

package/src/types.d.ts

@@ -25,6 +25,7 @@ export interface Instance
   extends InstanceBaseInfo,
     Partial<InstanceExtraAttributes> {
   children?: Instance[];
+  trackLinkCount?: number | null
   __contentText?: string;
 }
 

package/src/utils.ts

@@ -29,7 +29,11 @@ import normalizeClassNames from 'shared/normalizeClassNames';
 
 import {$createBarDecoratorNode, $isBarDecoratorNode} from './bar';
 import {$isInstanceNode, InstanceNode} from './base';
-import {numberNodeKey, paragraphSymbol} from './const';
+import {
+  internalLinkNameUpdateMap,
+  numberNodeKey,
+  paragraphSymbol,
+} from './const';
 import {InstanceHeadingNode} from './heading';
 import {$isInstanceParagraphNode, InstanceParagraphNode} from './paragraph';
 import {$isInstanceTitleNode} from './paragraph/title';
@@ -218,6 +222,7 @@ export function $scrollTo(number: string) {
 export function clearCache() {
   paragraphSymbol.clear();
   numberNodeKey.clear();
+  internalLinkNameUpdateMap.clear();
 }
 
 export function $getInstanceNodeKeyByNumber(number: string) {
@@ -228,7 +233,19 @@ export function $getInstanceNodeKeyByNumber(number: string) {
 export function $getInstanceNodeByNumber(number: string) {
   const key = $getInstanceNodeKeyByNumber(number);
   if (key) {
-    return $getNodeByKey(key);
+    return $getNodeByKey<InstanceNode>(key);
+  }
+}
+
+export function updateRelatedInternalLink<T extends ElementNode>(nodes: T[]) {
+  const insNodes = nodes.filter((node) => $isInstanceNode(node));
+  if (insNodes.length) {
+    insNodes.forEach((node) => {
+      internalLinkNameUpdateMap
+        .get(node.__instance.value.number!)
+        ?.values()
+        .forEach((update) => update());
+    });
   }
 }
 
@@ -244,6 +261,7 @@ export function nodeMoveUp<T extends ElementNode>(nodes?: T[] | null) {
         previous?.insertBefore(current);
       }
     }
+    updateRelatedInternalLink(nodes);
   }
 }
 
@@ -259,6 +277,7 @@ export function nodeMoveDown<T extends ElementNode>(nodes?: T[] | null) {
         next?.insertAfter(current);
       }
     }
+    updateRelatedInternalLink(nodes);
   }
 }
 
@@ -278,6 +297,7 @@ export async function $nodeUpgrade<T extends ElementNode>(nodes?: T[] | null) {
     if (bar) {
       bar.replace($createBarDecoratorNode());
     }
+    updateRelatedInternalLink(nodes);
   }
 }
 
@@ -295,6 +315,7 @@ export async function $nodeDowngrade<T extends ElementNode>(
         bar.replace($createBarDecoratorNode());
       }
     }
+    updateRelatedInternalLink(nodes);
   }
 }
 

package/OnchainLexicalInstance.js

@@ -1,11 +0,0 @@
-/**
- * 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');