@blocklet/editor 2.5.1 → 2.5.3

package/lib/ext/CharacterLimitPlugin/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { CharacterLimitPlugin as LexicalCharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
 import { Box } from '@mui/material';
+import { CharacterLimitPlugin as LexicalCharacterLimitPlugin } from '../../vendor/LexicalCharacterLimitPlugin';
 import { MaxLengthPlugin } from '../../main/plugins/MaxLengthPlugin';
 export function CharacterLimitPlugin({ maxLength, charLimitIndicatorStyle, alignLeft = false, }) {
     const [editor] = useLexicalComposerContext();

package/lib/ext/CustomComponent/components/Field.js

@@ -136,11 +136,9 @@ export default function Field({ name, type, default: defaultVal, required, depre
     return (_jsxs(Stack, { className: "x-field", sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
-            pt: 1.25,
-            pb: 2.5,
             my: 1.25,
             '& &:last-child': {
                 borderBottom: 'none',
             },
-        }, children: [_jsxs(Bar, { children: [name && _jsx(Box, { sx: { color: 'primary.main', fontWeight: 500 }, children: name }), !isMobile && metaInfo] }), isMobile && _jsx(Bar, { sx: { mt: 1.25 }, children: metaInfo }), desc && _jsx(Box, { sx: { color: 'text.secondary', mt: 2 }, children: desc }), childDesc && _jsx(FieldDesc, { ...childDesc.properties }), renderChildren()] }));
+        }, children: [_jsxs(Bar, { children: [name && _jsx(Box, { sx: { color: 'primary.main', fontWeight: 500 }, children: name }), !isMobile && metaInfo] }), isMobile && _jsx(Bar, { sx: { mt: 1.25 }, children: metaInfo }), desc && _jsx(Box, { sx: { color: 'text.secondary', mt: 1, mb: 1.25 }, children: desc }), childDesc && _jsx(FieldDesc, { ...childDesc.properties }), renderChildren()] }));
 }

package/lib/ext/CustomComponent/components/FieldDesc.js

@@ -2,12 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import StaticEditor from './StaticEditor';
 export default function FieldDesc({ childNodes }) {
     return (_jsx(StaticEditor, { childNodes: childNodes, sx: {
+            mt: 1,
+            mb: 1.25,
             '&>p:first-child': {
                 color: 'text.secondary',
-                marginTop: (theme) => `${theme.spacing(2)} !important`,
-                marginLeft: 0,
-                marginRight: 0,
-                marginBottom: 0,
+                m: 0,
             },
         } }));
 }

package/lib/ext/CustomComponent/components/FieldGroup.js

@@ -6,8 +6,12 @@ export default function FieldGroup({ children = [] }) {
         return null;
     }
     return (_jsx(Box, { className: "x-field-group", sx: {
+            '& > .x-field:first-child': {
+                marginTop: 0,
+            },
             '& > .x-field:last-child': {
                 borderBottom: 'none',
+                marginBottom: 0,
             },
         }, children: children.map((child) => {
             const { properties } = child;

package/lib/vendor/LexicalCharacterLimitPlugin/LexicalCharacterLimitPlugin.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 { JSX } from 'react';
+export declare function CharacterLimitPlugin({ charset, maxLength, renderer, }: {
+    charset: 'UTF-8' | 'UTF-16';
+    maxLength: number;
+    renderer?: ({ remainingCharacters }: {
+        remainingCharacters: number;
+    }) => JSX.Element;
+}): JSX.Element;

package/lib/vendor/LexicalCharacterLimitPlugin/LexicalCharacterLimitPlugin.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useMemo, useState } from 'react';
+import { useCharacterLimit } from './useCharacterLimit';
+const CHARACTER_LIMIT = 5;
+let textEncoderInstance = null;
+function textEncoder() {
+    if (window.TextEncoder === undefined) {
+        return null;
+    }
+    if (textEncoderInstance === null) {
+        textEncoderInstance = new window.TextEncoder();
+    }
+    return textEncoderInstance;
+}
+function utf8Length(text) {
+    const currentTextEncoder = textEncoder();
+    if (currentTextEncoder === null) {
+        // http://stackoverflow.com/a/5515960/210370
+        const m = encodeURIComponent(text).match(/%[89ABab]/g);
+        return text.length + (m ? m.length : 0);
+    }
+    return currentTextEncoder.encode(text).length;
+}
+function DefaultRenderer({ remainingCharacters }) {
+    return (_jsx("span", { className: `characters-limit ${remainingCharacters < 0 ? 'characters-limit-exceeded' : ''}`, children: remainingCharacters }));
+}
+export function CharacterLimitPlugin({ charset = 'UTF-16', maxLength = CHARACTER_LIMIT, renderer = DefaultRenderer, }) {
+    const [editor] = useLexicalComposerContext();
+    const [remainingCharacters, setRemainingCharacters] = useState(maxLength);
+    const characterLimitProps = useMemo(() => ({
+        remainingCharacters: setRemainingCharacters,
+        strlen: (text) => {
+            if (charset === 'UTF-8') {
+                return utf8Length(text);
+            }
+            if (charset === 'UTF-16') {
+                return text.length;
+            }
+            throw new Error('Unrecognized charset');
+        },
+    }), [charset]);
+    useCharacterLimit(editor, maxLength, characterLimitProps);
+    return renderer({ remainingCharacters });
+}

package/lib/vendor/LexicalCharacterLimitPlugin/index.d.ts

@@ -0,0 +1 @@
+export * from './LexicalCharacterLimitPlugin';

package/lib/vendor/LexicalCharacterLimitPlugin/index.js

@@ -0,0 +1 @@
+export * from './LexicalCharacterLimitPlugin';

package/lib/vendor/LexicalCharacterLimitPlugin/useCharacterLimit.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 { LexicalEditor } from 'lexical';
+import { OverflowNode } from '@lexical/overflow';
+type OptionalProps = {
+    remainingCharacters?: (characters: number) => void;
+    strlen?: (input: string) => number;
+};
+export declare function useCharacterLimit(editor: LexicalEditor, maxCharacters: number, optional?: OptionalProps): void;
+export declare function $mergePrevious(overflowNode: OverflowNode): void;
+export {};

package/lib/vendor/LexicalCharacterLimitPlugin/useCharacterLimit.js

@@ -0,0 +1,208 @@
+/**
+ * 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 { $createOverflowNode, $isOverflowNode, OverflowNode } from '@lexical/overflow';
+import { $rootTextContent } from '@lexical/text';
+import { $dfs, $unwrapNode, mergeRegister } from '@lexical/utils';
+import { $getSelection, $isElementNode, $isLeafNode, $isRangeSelection, $isTextNode, $setSelection, COMMAND_PRIORITY_LOW, DELETE_CHARACTER_COMMAND, } from 'lexical';
+import { useEffect } from 'react';
+import invariant from '../../shared/invariant';
+export function useCharacterLimit(editor, maxCharacters, optional = Object.freeze({})) {
+    const { strlen = (input) => input.length, 
+    // UTF-16
+    remainingCharacters = () => { }, } = optional;
+    useEffect(() => {
+        if (!editor.hasNodes([OverflowNode])) {
+            invariant(false, 'useCharacterLimit: OverflowNode not registered on editor');
+        }
+    }, [editor]);
+    useEffect(() => {
+        let text = editor.getEditorState().read($rootTextContent);
+        let lastComputedTextLength = 0;
+        return mergeRegister(editor.registerTextContentListener((currentText) => {
+            text = currentText;
+        }), editor.registerUpdateListener((payload) => {
+            if (!payload)
+                return;
+            const { dirtyLeaves, dirtyElements } = payload;
+            const isComposing = editor.isComposing();
+            const hasContentChanges = dirtyLeaves.size > 0 || dirtyElements.size > 0;
+            if (isComposing || !hasContentChanges) {
+                return;
+            }
+            const textLength = strlen(text);
+            const textLengthAboveThreshold = textLength > maxCharacters || (lastComputedTextLength !== null && lastComputedTextLength > maxCharacters);
+            const diff = maxCharacters - textLength;
+            remainingCharacters(diff);
+            if (lastComputedTextLength === null || textLengthAboveThreshold) {
+                const offset = findOffset(text, maxCharacters, strlen);
+                editor.update(() => {
+                    $wrapOverflowedNodes(offset);
+                }, {
+                    tag: 'history-merge',
+                });
+            }
+            lastComputedTextLength = textLength;
+        }), editor.registerCommand(DELETE_CHARACTER_COMMAND, (isBackward) => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) {
+                return false;
+            }
+            const anchorNode = selection.anchor.getNode();
+            const overflow = anchorNode.getParent();
+            const overflowParent = overflow ? overflow.getParent() : null;
+            const parentNext = overflowParent ? overflowParent.getNextSibling() : null;
+            selection.deleteCharacter(isBackward);
+            if (overflowParent && overflowParent.isEmpty()) {
+                overflowParent.remove();
+            }
+            else if ($isElementNode(parentNext) && parentNext.isEmpty()) {
+                parentNext.remove();
+            }
+            return true;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor, maxCharacters, remainingCharacters, strlen]);
+}
+function findOffset(text, maxCharacters, strlen) {
+    const { Segmenter } = Intl;
+    let offsetUtf16 = 0;
+    let offset = 0;
+    if (typeof Segmenter === 'function') {
+        const segmenter = new Segmenter();
+        const graphemes = segmenter.segment(text);
+        for (const { segment: grapheme } of graphemes) {
+            const nextOffset = offset + strlen(grapheme);
+            if (nextOffset > maxCharacters) {
+                break;
+            }
+            offset = nextOffset;
+            offsetUtf16 += grapheme.length;
+        }
+    }
+    else {
+        const codepoints = Array.from(text);
+        const codepointsLength = codepoints.length;
+        for (let i = 0; i < codepointsLength; i++) {
+            const codepoint = codepoints[i];
+            const nextOffset = offset + strlen(codepoint);
+            if (nextOffset > maxCharacters) {
+                break;
+            }
+            offset = nextOffset;
+            offsetUtf16 += codepoint.length;
+        }
+    }
+    return offsetUtf16;
+}
+function $wrapOverflowedNodes(offset) {
+    const dfsNodes = $dfs().filter(Boolean);
+    const dfsNodesLength = dfsNodes.length;
+    let accumulatedLength = 0;
+    for (let i = 0; i < dfsNodesLength; i += 1) {
+        const { node } = dfsNodes[i];
+        if ($isOverflowNode(node)) {
+            const previousLength = accumulatedLength;
+            const nextLength = accumulatedLength + node.getTextContentSize();
+            if (nextLength <= offset) {
+                const parent = node.getParent();
+                const previousSibling = node.getPreviousSibling();
+                const nextSibling = node.getNextSibling();
+                $unwrapNode(node);
+                const selection = $getSelection();
+                // Restore selection when the overflow children are removed
+                if ($isRangeSelection(selection) &&
+                    (!selection.anchor.getNode().isAttached() || !selection.focus.getNode().isAttached())) {
+                    if ($isTextNode(previousSibling)) {
+                        previousSibling.select();
+                    }
+                    else if ($isTextNode(nextSibling)) {
+                        nextSibling.select();
+                    }
+                    else if (parent !== null) {
+                        parent.select();
+                    }
+                }
+            }
+            else if (previousLength < offset) {
+                const descendant = node.getFirstDescendant();
+                const descendantLength = descendant !== null ? descendant.getTextContentSize() : 0;
+                const previousPlusDescendantLength = previousLength + descendantLength;
+                // For simple text we can redimension the overflow into a smaller and more accurate
+                // container
+                const firstDescendantIsSimpleText = $isTextNode(descendant) && descendant.isSimpleText();
+                const firstDescendantDoesNotOverflow = previousPlusDescendantLength <= offset;
+                if (firstDescendantIsSimpleText || firstDescendantDoesNotOverflow) {
+                    $unwrapNode(node);
+                }
+            }
+        }
+        else if ($isLeafNode(node)) {
+            const previousAccumulatedLength = accumulatedLength;
+            accumulatedLength += node.getTextContentSize();
+            if (accumulatedLength > offset && !$isOverflowNode(node.getParent())) {
+                const previousSelection = $getSelection();
+                let overflowNode;
+                // For simple text we can improve the limit accuracy by splitting the TextNode
+                // on the split point
+                if (previousAccumulatedLength < offset && $isTextNode(node) && node.isSimpleText()) {
+                    const [, overflowedText] = node.splitText(offset - previousAccumulatedLength);
+                    overflowNode = $wrapNode(overflowedText);
+                }
+                else {
+                    overflowNode = $wrapNode(node);
+                }
+                if (previousSelection !== null) {
+                    $setSelection(previousSelection);
+                }
+                $mergePrevious(overflowNode);
+            }
+        }
+    }
+}
+function $wrapNode(node) {
+    const overflowNode = $createOverflowNode();
+    node.replace(overflowNode);
+    overflowNode.append(node);
+    return overflowNode;
+}
+export function $mergePrevious(overflowNode) {
+    const previousNode = overflowNode.getPreviousSibling();
+    if (!$isOverflowNode(previousNode)) {
+        return;
+    }
+    const firstChild = overflowNode.getFirstChild();
+    const previousNodeChildren = previousNode.getChildren();
+    const previousNodeChildrenLength = previousNodeChildren.length;
+    if (firstChild === null) {
+        overflowNode.append(...previousNodeChildren);
+    }
+    else {
+        for (let i = 0; i < previousNodeChildrenLength; i++) {
+            firstChild.insertBefore(previousNodeChildren[i]);
+        }
+    }
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+        const { anchor } = selection;
+        const anchorNode = anchor.getNode();
+        const { focus } = selection;
+        const focusNode = anchor.getNode();
+        if (anchorNode.is(previousNode)) {
+            anchor.set(overflowNode.getKey(), anchor.offset, 'element');
+        }
+        else if (anchorNode.is(overflowNode)) {
+            anchor.set(overflowNode.getKey(), previousNodeChildrenLength + anchor.offset, 'element');
+        }
+        if (focusNode.is(previousNode)) {
+            focus.set(overflowNode.getKey(), focus.offset, 'element');
+        }
+        else if (focusNode.is(overflowNode)) {
+            focus.set(overflowNode.getKey(), previousNodeChildrenLength + focus.offset, 'element');
+        }
+    }
+    previousNode.remove();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.5.1"
+    "@blocklet/pdf": "2.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",