@eventuras/scribo 0.4.2

package/src/themes/EditorTheme.css

@@ -0,0 +1,297 @@
+/**
+ * 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.
+ *
+ *
+ */
+.PlaygroundEditorTheme__ltr {
+  text-align: left;
+}
+.PlaygroundEditorTheme__rtl {
+  text-align: right;
+}
+.PlaygroundEditorTheme__paragraph {
+  margin: 0;
+  position: relative;
+}
+.PlaygroundEditorTheme__quote {
+  margin: 0;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
+}
+.PlaygroundEditorTheme__h1 {
+  font-size: 32px;
+  line-height: 1.3;
+  padding-top: 2rem;
+  padding-bottom: 0.5rem;
+  color: #406280;
+  font-weight: 700;
+  margin: 0;
+}
+.PlaygroundEditorTheme__h2 {
+  font-size: 32px;
+  color: #406280;
+  padding-top: 2rem;
+    padding-bottom: 0.5rem;
+  font-weight: 700;
+  margin: 0;
+}
+.PlaygroundEditorTheme__h3 {
+  font-size: 24px;
+  color: #406280;
+    padding-top: 2rem;
+      padding-bottom: 0.5rem;
+  font-weight: 700;
+  margin: 0;
+}
+.PlaygroundEditorTheme__h4 {
+  font-size: 16px;
+  color: #406280;
+    padding-top: 1.5rem;
+      padding-bottom: 0rem;
+  font-weight: 700;
+  margin: 0;
+}
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
+.PlaygroundEditorTheme__textBold {
+  font-weight: bold;
+}
+.PlaygroundEditorTheme__textItalic {
+  font-style: italic;
+}
+.PlaygroundEditorTheme__textUnderline {
+  text-decoration: underline;
+}
+.PlaygroundEditorTheme__textStrikethrough {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__textUnderlineStrikethrough {
+  text-decoration: underline line-through;
+}
+.PlaygroundEditorTheme__textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+.PlaygroundEditorTheme__textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+.PlaygroundEditorTheme__textCode {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+.PlaygroundEditorTheme__hashtag {
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+}
+.PlaygroundEditorTheme__link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+.PlaygroundEditorTheme__link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__code {
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+  position: relative;
+  tab-size: 2;
+}
+.PlaygroundEditorTheme__code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #eee;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.PlaygroundEditorTheme__characterLimit {
+  display: inline;
+  background-color: #ffbbbb !important;
+}
+.PlaygroundEditorTheme__ol1 {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol2 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-alpha;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol3 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-alpha;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol4 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ol5 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-roman;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__ul {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__listItem {
+  margin: 0 32px;
+}
+.PlaygroundEditorTheme__listItemChecked,
+.PlaygroundEditorTheme__listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.PlaygroundEditorTheme__listItemChecked {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before,
+.PlaygroundEditorTheme__listItemChecked:before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.PlaygroundEditorTheme__listItemUnchecked[dir="rtl"]:before,
+.PlaygroundEditorTheme__listItemChecked[dir="rtl"]:before {
+  left: auto;
+  right: 0;
+}
+.PlaygroundEditorTheme__listItemUnchecked:focus:before,
+.PlaygroundEditorTheme__listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.PlaygroundEditorTheme__listItemChecked:after {
+  content: "";
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  right: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.PlaygroundEditorTheme__nestedListItem {
+  list-style-type: none;
+}
+.PlaygroundEditorTheme__nestedListItem:before,
+.PlaygroundEditorTheme__nestedListItem:after {
+  display: none;
+}
+.PlaygroundEditorTheme__tokenComment {
+  color: slategray;
+}
+.PlaygroundEditorTheme__tokenPunctuation {
+  color: #999;
+}
+.PlaygroundEditorTheme__tokenProperty {
+  color: #905;
+}
+.PlaygroundEditorTheme__tokenSelector {
+  color: #690;
+}
+.PlaygroundEditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.PlaygroundEditorTheme__tokenAttr {
+  color: #07a;
+}
+.PlaygroundEditorTheme__tokenVariable {
+  color: #e90;
+}
+.PlaygroundEditorTheme__tokenFunction {
+  color: #dd4a68;
+}
+.PlaygroundEditorTheme__mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.PlaygroundEditorTheme__markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.PlaygroundEditorTheme__markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__embedBlock {
+  user-select: none;
+}
+.PlaygroundEditorTheme__embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__layoutContaner {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}

package/src/themes/EditorTheme.ts

@@ -0,0 +1,118 @@
+/**
+ * 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 "./EditorTheme.css";
+
+import type { EditorThemeClasses } from "lexical";
+
+const theme: EditorThemeClasses = {
+  blockCursor: "PlaygroundEditorTheme__blockCursor",
+  characterLimit: "PlaygroundEditorTheme__characterLimit",
+  code: "PlaygroundEditorTheme__code",
+  codeHighlight: {
+    atrule: "PlaygroundEditorTheme__tokenAttr",
+    attr: "PlaygroundEditorTheme__tokenAttr",
+    boolean: "PlaygroundEditorTheme__tokenProperty",
+    builtin: "PlaygroundEditorTheme__tokenSelector",
+    cdata: "PlaygroundEditorTheme__tokenComment",
+    char: "PlaygroundEditorTheme__tokenSelector",
+    class: "PlaygroundEditorTheme__tokenFunction",
+    "class-name": "PlaygroundEditorTheme__tokenFunction",
+    comment: "PlaygroundEditorTheme__tokenComment",
+    constant: "PlaygroundEditorTheme__tokenProperty",
+    deleted: "PlaygroundEditorTheme__tokenProperty",
+    doctype: "PlaygroundEditorTheme__tokenComment",
+    entity: "PlaygroundEditorTheme__tokenOperator",
+    function: "PlaygroundEditorTheme__tokenFunction",
+    important: "PlaygroundEditorTheme__tokenVariable",
+    inserted: "PlaygroundEditorTheme__tokenSelector",
+    keyword: "PlaygroundEditorTheme__tokenAttr",
+    namespace: "PlaygroundEditorTheme__tokenVariable",
+    number: "PlaygroundEditorTheme__tokenProperty",
+    operator: "PlaygroundEditorTheme__tokenOperator",
+    prolog: "PlaygroundEditorTheme__tokenComment",
+    property: "PlaygroundEditorTheme__tokenProperty",
+    punctuation: "PlaygroundEditorTheme__tokenPunctuation",
+    regex: "PlaygroundEditorTheme__tokenVariable",
+    selector: "PlaygroundEditorTheme__tokenSelector",
+    string: "PlaygroundEditorTheme__tokenSelector",
+    symbol: "PlaygroundEditorTheme__tokenProperty",
+    tag: "PlaygroundEditorTheme__tokenProperty",
+    url: "PlaygroundEditorTheme__tokenOperator",
+    variable: "PlaygroundEditorTheme__tokenVariable",
+  },
+  embedBlock: {
+    base: "PlaygroundEditorTheme__embedBlock",
+    focus: "PlaygroundEditorTheme__embedBlockFocus",
+  },
+  hashtag: "PlaygroundEditorTheme__hashtag",
+  heading: {
+    h1: "PlaygroundEditorTheme__h1",
+    h2: "PlaygroundEditorTheme__h2",
+    h3: "PlaygroundEditorTheme__h3",
+    h4: "PlaygroundEditorTheme__h4",
+    h5: "PlaygroundEditorTheme__h5",
+    h6: "PlaygroundEditorTheme__h6",
+  },
+  image: "editor-image",
+  indent: "PlaygroundEditorTheme__indent",
+  inlineImage: "inline-editor-image",
+  layoutContainer: "PlaygroundEditorTheme__layoutContaner",
+  layoutItem: "PlaygroundEditorTheme__layoutItem",
+  link: "PlaygroundEditorTheme__link",
+  list: {
+    listitem: "PlaygroundEditorTheme__listItem",
+    listitemChecked: "PlaygroundEditorTheme__listItemChecked",
+    listitemUnchecked: "PlaygroundEditorTheme__listItemUnchecked",
+    nested: {
+      listitem: "PlaygroundEditorTheme__nestedListItem",
+    },
+    olDepth: [
+      "PlaygroundEditorTheme__ol1",
+      "PlaygroundEditorTheme__ol2",
+      "PlaygroundEditorTheme__ol3",
+      "PlaygroundEditorTheme__ol4",
+      "PlaygroundEditorTheme__ol5",
+    ],
+    ul: "PlaygroundEditorTheme__ul",
+  },
+  ltr: "PlaygroundEditorTheme__ltr",
+  mark: "PlaygroundEditorTheme__mark",
+  markOverlap: "PlaygroundEditorTheme__markOverlap",
+  paragraph: "PlaygroundEditorTheme__paragraph",
+  quote: "PlaygroundEditorTheme__quote",
+  rtl: "PlaygroundEditorTheme__rtl",
+  table: "PlaygroundEditorTheme__table",
+  tableAddColumns: "PlaygroundEditorTheme__tableAddColumns",
+  tableAddRows: "PlaygroundEditorTheme__tableAddRows",
+  tableCell: "PlaygroundEditorTheme__tableCell",
+  tableCellActionButton: "PlaygroundEditorTheme__tableCellActionButton",
+  tableCellActionButtonContainer:
+    "PlaygroundEditorTheme__tableCellActionButtonContainer",
+  tableCellEditing: "PlaygroundEditorTheme__tableCellEditing",
+  tableCellHeader: "PlaygroundEditorTheme__tableCellHeader",
+  tableCellPrimarySelected: "PlaygroundEditorTheme__tableCellPrimarySelected",
+  tableCellResizer: "PlaygroundEditorTheme__tableCellResizer",
+  tableCellSelected: "PlaygroundEditorTheme__tableCellSelected",
+  tableCellSortedIndicator: "PlaygroundEditorTheme__tableCellSortedIndicator",
+  tableResizeRuler: "PlaygroundEditorTheme__tableCellResizeRuler",
+  tableSelected: "PlaygroundEditorTheme__tableSelected",
+  tableSelection: "PlaygroundEditorTheme__tableSelection",
+  text: {
+    bold: "PlaygroundEditorTheme__textBold",
+    code: "PlaygroundEditorTheme__textCode",
+    italic: "PlaygroundEditorTheme__textItalic",
+    strikethrough: "PlaygroundEditorTheme__textStrikethrough",
+    subscript: "PlaygroundEditorTheme__textSubscript",
+    superscript: "PlaygroundEditorTheme__textSuperscript",
+    underline: "PlaygroundEditorTheme__textUnderline",
+    underlineStrikethrough: "PlaygroundEditorTheme__textUnderlineStrikethrough",
+  },
+};
+
+export default theme;

package/src/ui/ContentEditable.css

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ *
+ */
+.ContentEditable__root {
+  border: 0;
+  font-size: 15px;
+  display: block;
+  position: relative;
+  outline: 0;
+  padding: 8px 28px 40px;
+  min-height: 150px;
+}
+@media (max-width: 1025px) {
+  .ContentEditable__root {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}

package/src/ui/ContentEditable.tsx

@@ -0,0 +1,19 @@
+/**
+ * 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 "./ContentEditable.css";
+
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+
+export default function LexicalContentEditable({
+  className,
+}: {
+  className?: string;
+}): JSX.Element {
+  return <ContentEditable className={className || "ContentEditable__root"} />;
+}

package/src/ui/DropDown.tsx

@@ -0,0 +1,262 @@
+/**
+ * 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 {isDOMNode} from 'lexical';
+import * as React from 'react';
+import {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+type DropDownContextType = {
+  registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;
+};
+
+const DropDownContext = React.createContext<DropDownContextType | null>(null);
+
+const dropDownPadding = 4;
+
+export function DropDownItem({
+  children,
+  className,
+  onClick,
+  title,
+}: Readonly<{
+  children: React.ReactNode;
+  className: string;
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  title?: string;
+}>) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const dropDownContext = React.useContext(DropDownContext);
+
+  if (dropDownContext === null) {
+    throw new Error('DropDownItem must be used within a DropDown');
+  }
+
+  const {registerItem} = dropDownContext;
+
+  useEffect(() => {
+    if (ref && ref.current) {
+      registerItem(ref as React.RefObject<HTMLButtonElement>);
+    }
+  }, [ref, registerItem]);
+
+  return (
+    <button
+      className={className}
+      onClick={onClick}
+      ref={ref}
+      title={title}
+      type="button">
+      {children}
+    </button>
+  );
+}
+
+function DropDownItems({
+  children,
+  dropDownRef,
+  onClose,
+}: {
+  children: React.ReactNode;
+  dropDownRef: React.Ref<HTMLDivElement>;
+  onClose: () => void;
+}) {
+  const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();
+  const [highlightedItem, setHighlightedItem] =
+    useState<React.RefObject<HTMLButtonElement>>();
+
+  const registerItem = useCallback(
+    (itemRef: React.RefObject<HTMLButtonElement>) => {
+      setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
+    },
+    [setItems],
+  );
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!items) {
+      return;
+    }
+
+    const key = event.key;
+
+    if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
+      event.preventDefault();
+    }
+
+    if (key === 'Escape' || key === 'Tab') {
+      onClose();
+    } else if (key === 'ArrowUp') {
+      setHighlightedItem((prev) => {
+        if (!prev) {
+          return items[0];
+        }
+        const index = items.indexOf(prev) - 1;
+        return items[index === -1 ? items.length - 1 : index];
+      });
+    } else if (key === 'ArrowDown') {
+      setHighlightedItem((prev) => {
+        if (!prev) {
+          return items[0];
+        }
+        return items[items.indexOf(prev) + 1];
+      });
+    }
+  };
+
+  const contextValue = useMemo(
+    () => ({
+      registerItem,
+    }),
+    [registerItem],
+  );
+
+  useEffect(() => {
+    if (items && !highlightedItem) {
+      setHighlightedItem(items[0]);
+    }
+
+    if (highlightedItem && highlightedItem.current) {
+      highlightedItem.current.focus();
+    }
+  }, [items, highlightedItem]);
+
+  return (
+    <DropDownContext.Provider value={contextValue}>
+      <div className="dropdown" ref={dropDownRef} onKeyDown={handleKeyDown}>
+        {children}
+      </div>
+    </DropDownContext.Provider>
+  );
+}
+
+export default function DropDown({
+  disabled = false,
+  buttonLabel,
+  buttonAriaLabel,
+  buttonClassName,
+  buttonIconClassName,
+  children,
+  stopCloseOnClickSelf,
+}: Readonly<{
+  disabled?: boolean;
+  buttonAriaLabel?: string;
+  buttonClassName: string;
+  buttonIconClassName?: string;
+  buttonLabel?: string;
+  children: ReactNode;
+  stopCloseOnClickSelf?: boolean;
+}>): JSX.Element {
+  const dropDownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [showDropDown, setShowDropDown] = useState(false);
+
+  const handleClose = () => {
+    setShowDropDown(false);
+    if (buttonRef && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  };
+
+  useEffect(() => {
+    const button = buttonRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (showDropDown && button !== null && dropDown !== null) {
+      const {top, left} = button.getBoundingClientRect();
+      dropDown.style.top = `${top + button.offsetHeight + dropDownPadding}px`;
+      dropDown.style.left = `${Math.min(
+        left,
+        window.innerWidth - dropDown.offsetWidth - 20,
+      )}px`;
+    }
+  }, [dropDownRef, buttonRef, showDropDown]);
+
+  useEffect(() => {
+    const button = buttonRef.current;
+
+    if (button !== null && showDropDown) {
+      const handle = (event: MouseEvent) => {
+        const target = event.target;
+        if (!isDOMNode(target)) {
+          return;
+        }
+        if (stopCloseOnClickSelf) {
+          if (dropDownRef.current && dropDownRef.current.contains(target)) {
+            return;
+          }
+        }
+        if (!button.contains(target)) {
+          setShowDropDown(false);
+        }
+      };
+      document.addEventListener('click', handle);
+
+      return () => {
+        document.removeEventListener('click', handle);
+      };
+    }
+  }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
+
+  useEffect(() => {
+    const handleButtonPositionUpdate = () => {
+      if (showDropDown) {
+        const button = buttonRef.current;
+        const dropDown = dropDownRef.current;
+        if (button !== null && dropDown !== null) {
+          const {top} = button.getBoundingClientRect();
+          const newPosition = top + button.offsetHeight + dropDownPadding;
+          if (newPosition !== dropDown.getBoundingClientRect().top) {
+            dropDown.style.top = `${newPosition}px`;
+          }
+        }
+      }
+    };
+
+    document.addEventListener('scroll', handleButtonPositionUpdate);
+
+    return () => {
+      document.removeEventListener('scroll', handleButtonPositionUpdate);
+    };
+  }, [buttonRef, dropDownRef, showDropDown]);
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={disabled}
+        aria-label={buttonAriaLabel || buttonLabel}
+        className={buttonClassName}
+        onClick={() => setShowDropDown(!showDropDown)}
+        ref={buttonRef}>
+        {buttonIconClassName && <span className={buttonIconClassName} />}
+        {buttonLabel && (
+          <span className="text dropdown-button-text">{buttonLabel}</span>
+        )}
+        <i className="chevron-down" />
+      </button>
+
+      {showDropDown &&
+        createPortal(
+          <DropDownItems dropDownRef={dropDownRef} onClose={handleClose}>
+            {children}
+          </DropDownItems>,
+          document.body,
+        )}
+    </>
+  );
+}