@eventuras/scribo 0.4.2

package/src/MarkdownEditor.tsx

@@ -0,0 +1,105 @@
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+  TRANSFORMERS,
+} from "@lexical/markdown";
+import {
+  $getRoot,
+} from 'lexical';
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { EditorState } from "lexical";
+import React, { useState } from "react";
+
+import EditorNodes from "./nodes/EditorNodes";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import EditorTheme from "./themes/EditorTheme";
+import ContentEditable from "./ui/ContentEditable";
+import Placeholder from "./ui/Placeholder";
+import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
+import "./MarkdownEditor.css";
+import LinkPlugin from "./plugins/LinkPlugin";
+import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
+import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+import {useSharedHistoryContext} from './context/SharedHistoryContext';
+
+export type onChangeMisc = {
+  plainText: string
+}
+export interface MarkdownEditorProps {
+  initialMarkdown?: string;
+  className?: string;
+  onChange?: (markdown: string, misc: onChangeMisc) => void;
+  onBlur?: () => void;
+  placeholder?: string;
+}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = (props) => {
+  const {historyState} = useSharedHistoryContext();
+  const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
+
+  const [floatingAnchorElem, setFloatingAnchorElem] =
+    useState<HTMLDivElement | undefined>(undefined);
+
+  const onRef = (_floatingAnchorElem: HTMLDivElement) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem);
+    }
+  };
+
+  const internalOnChange = (editorState: EditorState) => {
+    editorState.read(() => {
+      const markdown = $convertToMarkdownString(TRANSFORMERS);
+      const plainText = $getRoot().getTextContent()
+      props.onChange && props.onChange(markdown, { plainText });
+    });
+  };
+
+  const initialConfig = {
+    namespace: "ScriboMarkdown",
+    nodes: [...EditorNodes],
+    onError: (error: Error) => {
+      throw error;
+    },
+    theme: EditorTheme,
+    editorState: () => {
+      $convertFromMarkdownString(props.initialMarkdown ?? "", TRANSFORMERS);
+    },
+  };
+
+  return (
+    <div className={props.className}>
+      <LexicalComposer initialConfig={initialConfig}>
+        <div className="editor-shell" onBlur={props.onBlur}>
+          <ToolbarPlugin setIsLinkEditMode={setIsLinkEditMode} />
+          <div className="editor-container rich-text">
+            <HistoryPlugin externalHistoryState={historyState} />
+            <AutoLinkPlugin />
+            <LinkPlugin />
+            <FloatingLinkEditorPlugin
+                  anchorElem={floatingAnchorElem}
+                  isLinkEditMode={isLinkEditMode}
+                  setIsLinkEditMode={setIsLinkEditMode}
+                />
+            <RichTextPlugin
+              contentEditable={
+                <div className="editor-scroller">
+                  <div className="editor" ref={onRef}>
+                    <ContentEditable />
+                  </div>
+                </div>
+              }
+              placeholder={<Placeholder>{props.placeholder}</Placeholder>}
+              ErrorBoundary={LexicalErrorBoundary}
+            />
+          </div>
+          {props.onChange && <OnChangePlugin onChange={internalOnChange} />}
+        </div>
+      </LexicalComposer>
+    </div>
+  );
+};
+
+export default MarkdownEditor;

package/src/context/SharedHistoryContext.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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 {HistoryState} from '@lexical/react/LexicalHistoryPlugin';
+import type {JSX} from 'react';
+
+import {createEmptyHistoryState} from '@lexical/react/LexicalHistoryPlugin';
+import * as React from 'react';
+import {createContext, ReactNode, useContext, useMemo} from 'react';
+
+type ContextShape = {
+  historyState?: HistoryState;
+};
+
+const Context: React.Context<ContextShape> = createContext({});
+
+export const SharedHistoryContext = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const historyContext = useMemo(
+    () => ({historyState: createEmptyHistoryState()}),
+    [],
+  );
+  return <Context.Provider value={historyContext}>{children}</Context.Provider>;
+};
+
+export const useSharedHistoryContext = (): ContextShape => {
+  return useContext(Context);
+};

package/src/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { App } from './App'
+import './App.css'
+
+import readmeRaw from '../README.md?raw'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App initialMarkdown={readmeRaw} />
+  </React.StrictMode>,
+)

package/src/main.tsx

@@ -0,0 +1,4 @@
+
+import MarkdownEditor from "./MarkdownEditor";
+
+export default MarkdownEditor;

package/src/nodes/EditorNodes.ts

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ * Modified from: https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/PlaygroundNodes.ts
+ */
+
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { HashtagNode } from "@lexical/hashtag";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { MarkNode } from "@lexical/mark";
+import { OverflowNode } from "@lexical/overflow";
+import { HorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import type { Klass, LexicalNode } from "lexical";
+
+const EditorNodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  HashtagNode,
+  CodeHighlightNode,
+  AutoLinkNode,
+  LinkNode,
+  OverflowNode,
+  HorizontalRuleNode,
+  MarkNode,
+];
+
+export default EditorNodes;

package/src/plugins/AutoLinkPlugin.tsx

@@ -0,0 +1,34 @@
+/**
+ * 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';
+
+import {
+  AutoLinkPlugin,
+  createLinkMatcherWithRegExp,
+} from '@lexical/react/LexicalAutoLinkPlugin';
+import * as React from 'react';
+
+const URL_REGEX =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
+
+const EMAIL_REGEX =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
+    return text.startsWith('http') ? text : `https://${text}`;
+  }),
+  createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
+    return `mailto:${text}`;
+  }),
+];
+
+export default function LexicalAutoLinkPlugin(): JSX.Element {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}

package/src/plugins/FloatingLinkEditorPlugin.css

@@ -0,0 +1,41 @@
+.link-editor {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 0 0 8px 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}