@lobehub/editor
Version:
A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.
223 lines (217 loc) • 9.54 kB
JavaScript
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import { $caretFromPoint, $getCaretRange, $getChildCaret, $getRoot, $isElementNode, $isRangeSelection, $isTextNode, $isTextPointCaret, $parseSerializedNode, SELECTION_INSERT_CLIPBOARD_NODES_COMMAND } from 'lexical';
/**
* Returns true if the node can contain transformable markdown.
* Code nodes cannot contain transformable markdown.
* For example, `code **bold**` should not be transformed to
* <code>code <strong>bold</strong></code>.
*/
export function canContainTransformableMarkdown(node) {
return $isTextNode(node) && !node.hasFormat('code');
}
export function isEqualSubString(stringA, aStart, stringB, bStart, length) {
for (var i = 0; i < length; i++) {
if (stringA[aStart + i] !== stringB[bStart + i]) {
return false;
}
}
return true;
}
// eslint-disable-next-line unicorn/better-regex
export var PUNCTUATION_OR_SPACE = /[!-/:-@[-`{-~\s]/;
export function getOpenTagStartIndex(string, maxIndex, tag) {
var tagLength = tag.length;
for (var i = maxIndex; i >= tagLength; i--) {
var startIndex = i - tagLength;
if (isEqualSubString(string, startIndex, tag, 0, tagLength) &&
// Space after opening tag cancels transformation
string[startIndex + tagLength] !== ' ') {
return startIndex;
}
}
return -1;
}
export function indexBy(list, callback) {
var index = {};
var _iterator = _createForOfIteratorHelper(list),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var item = _step.value;
var key = callback(item);
if (!key) {
continue;
}
if (index[key]) {
index[key].push(item);
} else {
index[key] = [item];
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return index;
}
var Punctuation = /[!"#$%&'()*+,./:;<=>?@[\\\]^_`{|}~\u00A1\u2010-\u2027-]/;
try {
Punctuation = new RegExp('[\\p{Pc}|\\p{Pd}|\\p{Pe}|\\p{Pf}|\\p{Pi}|\\p{Po}|\\p{Ps}]', 'u');
} catch (_unused) {}
/**
* Checks if a character is a punctuation character.
* @param char The character to check.
* @returns True if the character is a punctuation character, false otherwise.
*/
export function isPunctuationChar(char) {
return Punctuation.test(char);
}
function $updateSelectionOnInsert(selection) {
if ($isRangeSelection(selection) && selection.isCollapsed()) {
var anchor = selection.anchor;
var nodeToInspect = null;
var anchorCaret = $caretFromPoint(anchor, 'previous');
if (anchorCaret) {
if ($isTextPointCaret(anchorCaret)) {
nodeToInspect = anchorCaret.origin;
} else {
var range = $getCaretRange(anchorCaret, $getChildCaret($getRoot(), 'next').getFlipped());
var _iterator2 = _createForOfIteratorHelper(range),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var caret = _step2.value;
if ($isTextNode(caret.origin)) {
nodeToInspect = caret.origin;
break;
} else if ($isElementNode(caret.origin) && !caret.origin.isInline()) {
break;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
}
}
if (nodeToInspect && $isTextNode(nodeToInspect)) {
var newFormat = nodeToInspect.getFormat();
var newStyle = nodeToInspect.getStyle();
if (selection.format !== newFormat || selection.style !== newStyle) {
selection.format = newFormat;
selection.style = newStyle;
selection.dirty = true;
}
}
}
}
/**
* Inserts Lexical nodes into the editor using different strategies depending on
* some simple selection-based heuristics. If you're looking for a generic way to
* to insert nodes into the editor at a specific selection point, you probably want
* {@link lexical.$insertNodes}
*
* @param editor LexicalEditor instance to insert the nodes into.
* @param nodes The nodes to insert.
* @param selection The selection to insert the nodes into.
*/
export function $insertGeneratedNodes(editor, nodes, selection) {
if (!editor.dispatchCommand(SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, {
nodes: nodes,
selection: selection
})) {
selection.insertNodes(nodes);
$updateSelectionOnInsert(selection);
}
return;
}
/**
* Creates an object containing all the styles and their values provided in the CSS string.
* @param css - The CSS string of styles and their values.
* @returns The styleObject containing all the styles and their values.
*/
export function getStyleObjectFromRawCSS(css) {
var styleObject = {};
if (!css) {
return styleObject;
}
var styles = css.split(';');
var _iterator3 = _createForOfIteratorHelper(styles),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var style = _step3.value;
if (style !== '') {
var _style$split = style.split(/:([^]+)/),
_style$split2 = _slicedToArray(_style$split, 2),
key = _style$split2[0],
value = _style$split2[1]; // split on first colon
if (key && value) {
styleObject[key.trim()] = value.trim();
}
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
return styleObject;
}
/**
* 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.
*
*/
export var CSS_TO_STYLES = new Map();
/**
* Gets the TextNode's style object and adds the styles to the CSS.
* @param node - The TextNode to add styles to.
*/
export function $addNodeStyle(node) {
var CSSText = node.getStyle();
var styles = getStyleObjectFromRawCSS(CSSText);
CSS_TO_STYLES.set(CSSText, styles);
}
/**
* This method takes an array of objects conforming to the BaseSerializedNode interface and returns
* an Array containing instances of the corresponding LexicalNode classes registered on the editor.
* Normally, you'd get an Array of BaseSerialized nodes from {@link $generateJSONFromSelectedNodes}
*
* @param serializedNodes an Array of objects conforming to the BaseSerializedNode interface.
* @returns an Array of Lexical Node objects.
*/
export function $generateNodesFromSerializedNodes(serializedNodes) {
var nodes = [];
var _iterator4 = _createForOfIteratorHelper(serializedNodes),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var serializedNode = _step4.value;
var node = $parseSerializedNode(serializedNode);
if ($isTextNode(node)) {
$addNodeStyle(node);
}
nodes.push(node);
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
return nodes;
}
export function insertIRootNode(editor, root, selection) {
var nodes = $generateNodesFromSerializedNodes(root.children);
$insertGeneratedNodes(editor, nodes, selection);
}