@blocklet/editor-lite 2.6.0

package/lib/main/plugins/YouTubePlugin/index.js

@@ -0,0 +1,27 @@
+/**
+ * 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 { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot } from '@lexical/utils';
+import { COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical';
+import { useEffect } from 'react';
+import { $createYouTubeNode, YouTubeNode } from '../../nodes/YouTubeNode';
+export const INSERT_YOUTUBE_COMMAND = createCommand('INSERT_YOUTUBE_COMMAND');
+export default function YouTubePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([YouTubeNode])) {
+            throw new Error('YouTubePlugin: YouTubeNode not registered on editor');
+        }
+        return editor.registerCommand(INSERT_YOUTUBE_COMMAND, (payload) => {
+            const youTubeNode = $createYouTubeNode(payload);
+            $insertNodeToNearestRoot(youTubeNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/lib/main/server/validation.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 {};

package/lib/main/server/validation.js

@@ -0,0 +1,119 @@
+/**
+ * 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 * as http from 'http';
+import * as url from 'url';
+import { createHeadlessEditor } from '@lexical/headless';
+import { $isMarkNode, $unwrapMarkNode } from '@lexical/mark';
+import { $getRoot, $isElementNode } from 'lexical';
+import PlaygroundNodes from '../nodes/PlaygroundNodes';
+const hostname = 'localhost';
+const port = 1235;
+let stringifiedEditorStateJSON = '';
+global.__DEV__ = true;
+const editor = createHeadlessEditor({
+    namespace: 'validation',
+    nodes: [...PlaygroundNodes],
+    onError: (error) => {
+        console.error(error);
+    },
+});
+const getJSONData = (req) => {
+    const body = [];
+    return new Promise((resolve) => {
+        req
+            .on('data', (chunk) => {
+            body.push(chunk);
+        })
+            .on('end', () => {
+            resolve(Buffer.concat(body).toString());
+        })
+            .on('error', (error) => {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        });
+    });
+};
+const sanitizeNode = (node) => {
+    if ($isMarkNode(node)) {
+        $unwrapMarkNode(node);
+        return;
+    }
+    if ($isElementNode(node)) {
+        const children = node.getChildren();
+        for (const child of children) {
+            sanitizeNode(child);
+        }
+    }
+};
+const validateEditorState = async (stringifiedJSON) => {
+    if (stringifiedEditorStateJSON === stringifiedJSON) {
+        return true;
+    }
+    const prevEditorState = editor.getEditorState();
+    const nextEditorState = editor.parseEditorState(stringifiedJSON);
+    editor.setEditorState(nextEditorState);
+    editor.update(() => {
+        const root = $getRoot();
+        sanitizeNode(root);
+    });
+    await Promise.resolve().then();
+    const assertion = JSON.stringify(editor.getEditorState().toJSON());
+    const success = assertion === stringifiedEditorStateJSON;
+    if (success) {
+        // eslint-disable-next-line no-console
+        console.log('Editor state updated successfully.');
+        editor.setEditorState(nextEditorState);
+        stringifiedEditorStateJSON = assertion;
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.log('Editor state was rejected!');
+        editor.setEditorState(prevEditorState);
+    }
+    return success;
+};
+const server = http.createServer(async (req, res) => {
+    // @ts-ignore
+    const { pathname } = url.parse(req.url);
+    const { method } = req;
+    res.setHeader('Content-Type', 'application/json');
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Request-Method', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, POST, GET');
+    res.setHeader('Access-Control-Allow-Headers', '*');
+    if (method === 'OPTIONS') {
+        res.end();
+        return;
+    }
+    if (method === 'POST' && pathname === '/setEditorState') {
+        const stringifiedJSON = await getJSONData(req);
+        const editorState = editor.parseEditorState(stringifiedJSON);
+        editor.setEditorState(editorState);
+        stringifiedEditorStateJSON = stringifiedJSON;
+        res.statusCode = 200;
+        res.end();
+    }
+    else if (method === 'POST' && pathname === '/validateEditorState') {
+        const stringifiedJSON = await getJSONData(req);
+        if (await validateEditorState(stringifiedJSON)) {
+            res.statusCode = 200;
+        }
+        else {
+            res.statusCode = 403;
+        }
+        res.end();
+    }
+    else {
+        res.statusCode = 404;
+        res.end();
+    }
+});
+server.listen(port, hostname, () => {
+    // eslint-disable-next-line no-console
+    console.log(`Read-only validation server running at http://${hostname}:${port}/`);
+});

package/lib/main/setupEnv.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 {};

package/lib/main/setupEnv.js

@@ -0,0 +1,25 @@
+/**
+ * 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 { DEFAULT_SETTINGS } from './appSettings';
+// override default options with query parameters if any
+const urlSearchParams = new URLSearchParams(window.location.search);
+for (const param of Object.keys(DEFAULT_SETTINGS)) {
+    if (urlSearchParams.has(param)) {
+        try {
+            const value = JSON.parse(urlSearchParams.get(param) ?? 'true');
+            DEFAULT_SETTINGS[param] = Boolean(value);
+        }
+        catch (error) {
+            console.warn(`Unable to parse query parameter "${param}"`);
+        }
+    }
+}
+if (DEFAULT_SETTINGS.disableBeforeInput) {
+    // @ts-expect-error
+    delete window.InputEvent.prototype.getTargetRanges;
+}

package/lib/main/style/editable.css

@@ -0,0 +1,476 @@
+/* ============================== toolbar ============================== */
+@container toolbar (max-width: 700px) {
+  .toolbar-item.font-size,
+  .toolbar-item.code,
+  .toolbar-item.alignment,
+  .toolbar-item.link,
+  .toolbar-item.aide,
+  .toolbar-item.color-picker,
+  .toolbar-item.text-format-additional {
+    display: none !important;
+  }
+}
+
+.toolbar {
+  display: flex;
+  margin-bottom: 1px;
+  padding: 4px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  vertical-align: middle;
+  overflow: auto;
+  container: toolbar / inline-size;
+}
+
+.toolbar button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 8px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.toolbar button.toolbar-item:disabled {
+  cursor: not-allowed;
+}
+
+.toolbar button.toolbar-item.spaced {
+  margin-right: 4px;
+}
+
+.toolbar button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.toolbar button.toolbar-item:disabled .icon,
+.toolbar button.toolbar-item:disabled .text,
+.toolbar button.toolbar-item:disabled i.format,
+.toolbar button.toolbar-item:disabled .chevron-down {
+  opacity: 0.2;
+}
+
+.toolbar button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.toolbar .toolbar-item.font-family .text {
+  display: block;
+  max-width: 40px;
+}
+
+.toolbar .code-language {
+  width: 150px;
+}
+
+.toolbar .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.toolbar .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.toolbar .toolbar-item .iconify {
+  display: flex;
+  width: 20px;
+  height: 20px;
+}
+
+.toolbar i.chevron-down {
+  margin-top: 3px;
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.toolbar i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+/* ============================== typeahead & menu ============================== */
+.typeahead-popover {
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  z-index: 1;
+}
+
+.typeahead-popover ul {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+  border-radius: 8px;
+  max-height: 280px;
+  overflow-y: scroll;
+}
+
+.typeahead-popover ul::-webkit-scrollbar {
+  display: none;
+}
+
+.typeahead-popover ul {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding: 8px 0;
+}
+
+.typeahead-popover ul li {
+  margin: 0;
+  min-width: 180px;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+}
+
+.typeahead-popover li {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  border: 0;
+}
+
+.typeahead-popover li.active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.typeahead-popover li .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.typeahead-popover li .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+/* blocklet embed option - disabled 样式 */
+.typeahead-popover ul li.embed-option-disabled {
+  color: #999;
+  cursor: default;
+}
+
+#typeahead-menu {
+  pointer-events: none;
+  z-index: 10001;
+}
+
+#typeahead-menu > * {
+  pointer-events: auto;
+}
+
+.component-picker-menu {
+  width: 200px;
+}
+
+.mentions-menu {
+  width: 250px;
+}
+
+.auto-embed-menu {
+  width: 200px;
+}
+
+.emoji-menu {
+  width: 200px;
+}
+
+/* ============================== link-editor ============================== */
+.link-editor .button.active,
+.toolbar .button.active {
+  background-color: rgb(223, 232, 250);
+}
+
+.link-editor .link-input {
+  display: block;
+  width: calc(100% - 24px);
+  box-sizing: border-box;
+  margin: 8px 12px;
+  padding: 8px 12px;
+  border-radius: 15px;
+  font-size: 15px;
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor div.link-edit {
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.link-editor .link-input a {
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+  text-decoration: underline;
+}
+
+.link-editor .font-size-wrapper,
+.link-editor .font-family-wrapper {
+  display: flex;
+  margin: 0 4px;
+}
+
+.link-editor select {
+  padding: 6px;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.075);
+  border-radius: 4px;
+}
+
+/* ============================== dropdown ============================== */
+.mention {
+  color: #666;
+}
+
+.mention:hover {
+  text-decoration: underline;
+}
+
+.mention:before {
+  display: inline-block;
+  content: '@';
+}
+
+.mention-typeahead-item-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 15px;
+  background-size: cover;
+}
+
+.dropdown {
+  z-index: 10001;
+  display: block;
+  position: fixed;
+  border-radius: 8px;
+  min-height: 40px;
+}
+
+.dropdown .item {
+  padding: 8px;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  border: 0;
+  max-width: 250px;
+  min-width: 100px;
+}
+
+.dropdown .item.fontsize-item,
+.dropdown .item.fontsize-item .text {
+  min-width: unset;
+}
+
+.dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  min-width: 150px;
+}
+
+.dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.dropdown .divider {
+  width: auto;
+  margin: 4px 8px;
+  height: 1px;
+}
+
+.dropdown-button-text {
+  margin-left: 8px;
+}
+
+@media screen and (max-width: 1100px) {
+  .dropdown-button-text {
+    display: none !important;
+  }
+  .font-size .dropdown-button-text {
+    display: flex !important;
+  }
+  .code-language .dropdown-button-text {
+    display: flex !important;
+  }
+}
+
+/* ============================== actions & table-cell-action ============================== */
+
+.actions {
+  position: absolute;
+  text-align: right;
+  padding: 10px;
+  bottom: 0;
+  right: 0;
+}
+
+.actions.tree-view {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  vertical-align: -0.25em;
+}
+
+.action-button {
+  background-color: #eee;
+  border: 0;
+  padding: 8px 12px;
+  position: relative;
+  margin-left: 5px;
+  border-radius: 15px;
+  color: #222;
+  cursor: pointer;
+  display: flex;
+}
+
+.action-button .MuiLoadingButton-loadingIndicator {
+  position: relative;
+  left: 0;
+  margin-right: 8px;
+}
+
+.action-button:hover {
+  background-color: #ddd;
+  color: #000;
+}
+
+.action-button-mic.active {
+  animation: mic-pulsate-color 3s infinite;
+}
+button.action-button:disabled {
+  cursor: not-allowed;
+}
+
+.table-cell-action-button-container {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}
+.table-cell-action-button-container.table-cell-action-button-container--active {
+  pointer-events: auto;
+  opacity: 1;
+}
+.table-cell-action-button-container.table-cell-action-button-container--inactive {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.table-cell-action-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 0;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border-radius: 15px;
+  color: #222;
+  display: inline-block;
+  cursor: pointer;
+  opacity: 0.75;
+}

package/lib/main/styled-editor-content.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+export declare function StyledEditorContent({ ref, children, ...rest }: BoxProps & {
+    ref?: React.RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element;