@collabchron/notiq 0.2.0

package/src/components/editor/plugins/YouTubeNode/index.tsx

@@ -0,0 +1,179 @@
+
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementFormatType,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  Spread,
+} from 'lexical';
+
+import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
+import {
+  DecoratorBlockNode,
+  SerializedDecoratorBlockNode,
+} from '@lexical/react/LexicalDecoratorBlockNode';
+import * as React from 'react';
+
+type YouTubeComponentProps = Readonly<{
+  className: Readonly<{
+    base: string;
+    focus: string;
+  }>;
+  format: ElementFormatType | null;
+  nodeKey: NodeKey;
+  videoID: string;
+}>;
+
+function YouTubeComponent({
+  className,
+  format,
+  nodeKey,
+  videoID,
+}: YouTubeComponentProps) {
+  return (
+    <BlockWithAlignableContents
+      className={className}
+      format={format}
+      nodeKey={nodeKey}>
+      <iframe
+        width="560"
+        height="315"
+        style={{
+          width: "100%",
+          aspectRatio: "16/9",
+          borderRadius: "8px",
+          border: "4px solid #e6c10aff"
+        }}
+        src={`https://www.youtube-nocookie.com/embed/${videoID}`}
+        frameBorder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen={true}
+        title="YouTube video"
+      />
+    </BlockWithAlignableContents>
+  );
+}
+
+export type SerializedYouTubeNode = Spread<
+  {
+    videoID: string;
+  },
+  SerializedDecoratorBlockNode
+>;
+
+function $convertYoutubeElement(
+  domNode: HTMLElement,
+): null | DOMConversionOutput {
+  const videoID = domNode.getAttribute('data-lexical-youtube');
+  if (videoID) {
+    const node = $createYouTubeNode(videoID);
+    return { node };
+  }
+  return null;
+}
+
+export class YouTubeNode extends DecoratorBlockNode {
+  __id: string;
+
+  static getType(): string {
+    return 'youtube';
+  }
+
+  static clone(node: YouTubeNode): YouTubeNode {
+    return new YouTubeNode(node.__id, node.__format, node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedYouTubeNode): YouTubeNode {
+    return $createYouTubeNode(serializedNode.videoID).updateFromJSON(
+      serializedNode,
+    );
+  }
+
+  exportJSON(): SerializedYouTubeNode {
+    return {
+      ...super.exportJSON(),
+      videoID: this.__id,
+    };
+  }
+
+  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
+    super(format, key);
+    this.__id = id;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('iframe');
+    element.setAttribute('data-lexical-youtube', this.__id);
+    element.setAttribute('width', '560');
+    element.setAttribute('height', '315');
+    element.setAttribute(
+      'src',
+      `https://www.youtube-nocookie.com/embed/${this.__id}`,
+    );
+    element.setAttribute('frameborder', '0');
+    element.setAttribute(
+      'allow',
+      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+    );
+    element.setAttribute('allowfullscreen', 'true');
+    element.setAttribute('title', 'YouTube video');
+    return { element };
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      iframe: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-youtube')) {
+          return null;
+        }
+        return {
+          conversion: $convertYoutubeElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  updateDOM(): false {
+    return false;
+  }
+
+  getId(): string {
+    return this.__id;
+  }
+
+  getTextContent(
+  ): string {
+    return `https://www.youtube.com/watch?v=${this.__id}`;
+  }
+
+  decorate(_editor: LexicalEditor, config: EditorConfig): React.JSX.Element {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    const className = {
+      base: embedBlockTheme.base || '',
+      focus: embedBlockTheme.focus || '',
+    };
+    return (
+      <YouTubeComponent
+        className={className}
+        format={this.__format}
+        nodeKey={this.getKey()}
+        videoID={this.__id}
+      />
+    );
+  }
+}
+
+export function $createYouTubeNode(videoID: string): YouTubeNode {
+  return new YouTubeNode(videoID);
+}
+
+export function $isYouTubeNode(
+  node: YouTubeNode | LexicalNode | null | undefined,
+): node is YouTubeNode {
+  return node instanceof YouTubeNode;
+}

package/src/components/editor/plugins/YouTubePlugin/index.ts

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

package/src/components/editor/themes/editor-theme.ts

@@ -0,0 +1,113 @@
+
+import type {EditorThemeClasses} from 'lexical';
+
+
+
+import "./theme.css"
+const theme: EditorThemeClasses = {
+  code:`
+  bg-[#e1e1e1] dark:bg-[#1a1a1a] m-0  text-sm  
+  overflow-auto relative pl-[52px]  p-3 font-mono group 
+  rounded-sm  w-full h-fit block  line-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',
+  },
+  list: { 
+    checklist: 'PlaygroundEditorTheme__checklist',
+    listitem: 'PlaygroundEditorTheme__listItem',
+    listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
+    listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
+    nested: {
+      listitem: 'PlaygroundEditorTheme__nestedListItem',
+    },
+    olDepth: [
+      'PlaygroundEditorTheme__ol1 ',
+      'PlaygroundEditorTheme__ol2',
+      'PlaygroundEditorTheme__ol3',
+      'PlaygroundEditorTheme__ol4',
+      'PlaygroundEditorTheme__ol5',
+    ],
+    ulDepth:[
+      'PlaygroundEditorTheme__ul1',
+      'PlaygroundEditorTheme__ul2',
+      'PlaygroundEditorTheme__ul3',
+      'PlaygroundEditorTheme__ul4',
+      'PlaygroundEditorTheme__ul5'
+    ],
+    ul: 'ul',
+    ol:"ol"
+  },
+  paragraph: 'leading-7',
+  link: `underline cursor-pointer text-blue-600 after:content-['_↗']`,
+  hr: 'w-full h-1  border-input',
+  table: 'PlaygroundEditorTheme__table',
+  tableCell: 'PlaygroundEditorTheme__tableCell',
+  tableCellActionButton: 'PlaygroundEditorTheme__tableCellActionButton',
+  tableCellActionButtonContainer:'PlaygroundEditorTheme__tableCellActionButtonContainer',
+  tableCellHeader: 'PlaygroundEditorTheme__tableCellHeader',
+  tableCellResizer: 'PlaygroundEditorTheme__tableCellResizer',
+  tableCellSelected: 'PlaygroundEditorTheme__tableCellSelected',
+  tableRowStriping: 'PlaygroundEditorTheme__tableRowStriping',
+  tableScrollableWrapper: 'PlaygroundEditorTheme__tableScrollableWrapper',
+  tableSelected: 'PlaygroundEditorTheme__tableSelected',
+  tableSelection: 'PlaygroundEditorTheme__tableSelection',
+  layoutContainer: 'grid gap-[10px] my-[10px] ',
+  layoutItem: 'px-2 py-[16px] border dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-50 border border-zinc-200 bg-white/90 shadow-md  rounded-sm',
+  heading: {
+    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+    h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+    h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+    h5: "text-lg font-bold",
+    h6: "text-sm font-bold",
+  },
+  quote:"mt-6 border-l-[4px] pl-6 italic",
+  text: {
+    bold: 'font-bold',
+    capitalize: 'capitalize',
+    code:  "inline-flex items-center rounded-sm border border-zinc-200 px-0.1 py-0  h-fit min-h-[20px] transition-colors focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 dark:border-zinc-800 dark:focus:ring-zinc-300 border-transparent bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80", 
+    italic: 'italic ',
+    lowercase: 'lowercase',
+    strikethrough: 'line-through',
+    underline: 'underline',
+    underlineStrikethrough: 'underline line-through',
+    uppercase: 'uppercase',
+  },
+
+};
+
+export default theme;

package/src/components/editor/themes/theme.css

@@ -0,0 +1,377 @@
+.PlaygroundEditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-x: auto;
+  table-layout: fixed;
+  display: block;
+  max-width: fit-content;
+  width: 100%;
+  margin: 0px 25px 30px 0px;
+}
+
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
+.PlaygroundEditorTheme__tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__tableCell {
+  border: 1px solid #979797;
+  width: 75px;
+  min-width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+}
+.PlaygroundEditorTheme__tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+
+  height: 4px;
+  background-color: #999;
+}
+.PlaygroundEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellHeader {
+  text-align: start;
+}
+.PlaygroundEditorTheme__tableCellSelected {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.PlaygroundEditorTheme__tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+.PlaygroundEditorTheme__tableAddColumns {
+  position: absolute;
+  background-color: #eee;
+  height: 100%;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddColumns:after {
+  background-image: url(/public/images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddColumns:hover,
+.PlaygroundEditorTheme__tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableAddRows {
+  position: absolute;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddRows:after {
+  background-image: url(/public/images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PlaygroundEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.PlaygroundEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}
+
+.PlaygroundEditorTheme__tokenComment {
+  color: slategray;
+}
+.PlaygroundEditorTheme__tokenPunctuation {
+  color: #999;
+}
+.PlaygroundEditorTheme__tokenProperty {
+  color: rgba(226, 113, 175, 0.5);
+}
+.PlaygroundEditorTheme__tokenSelector {
+  color: #690;
+}
+.PlaygroundEditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.PlaygroundEditorTheme__tokenAttr {
+  color: #07a;
+}
+.PlaygroundEditorTheme__tokenVariable {
+  color: #e90;
+}
+.PlaygroundEditorTheme__tokenFunction {
+  color: #e398a7;
+}
+
+.PlaygroundEditorTheme__embedBlock {
+  user-select: none;
+}
+.PlaygroundEditorTheme__embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+
+.line-code{
+  tab-size: 2;
+}
+
+
+.line-code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color:transparent;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-right: 1px solid rgba(42, 42, 42, 0.158);
+  padding: 8px;
+  color: rgba(0, 0, 0, 0.349);
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.line-code:before:hover{
+  background: red;
+}
+.dark .line-code:before{
+  border-right: 1px solid #3b3b3b65;
+  color: #777;
+  
+}
+
+.PlaygroundEditorTheme__ul1,
+.PlaygroundEditorTheme__ul2,
+.PlaygroundEditorTheme__ul3,
+.PlaygroundEditorTheme__ul4,
+.PlaygroundEditorTheme__ul5 {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+  
+}
+.PlaygroundEditorTheme__ol1,
+.PlaygroundEditorTheme__ol2,
+.PlaygroundEditorTheme__ol3,
+.PlaygroundEditorTheme__ol4,
+.PlaygroundEditorTheme__ol5 {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+}
+.PlaygroundEditorTheme__listItem {
+  margin: 2px 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;
+}
+.ol {
+  list-style-type: decimal;
+}
+
+.ul {
+  list-style-type:disc;
+}
+
+.PlaygroundEditorTheme__listItemChecked {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before,
+.PlaygroundEditorTheme__listItemChecked:before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  top: 4px;
+  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: 9px;
+  width: 3px;
+  left: 7px;
+  right: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+
+.PlaygroundEditorTheme__ol1 {
+  padding: 0;
+  margin: 0;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol2 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-alpha;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol3 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-alpha;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol4 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-roman;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ol5 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-roman;
+  list-style-position: outside;
+}
+
+.PlaygroundEditorTheme__ul1 {
+  padding: 0;
+  margin: 0;
+  list-style-type:disc;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ul2 {
+  padding: 0;
+  margin: 0;
+  list-style-type:circle;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ul3 {
+  padding: 0;
+  margin: 0;
+  list-style-type:square;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ul4 {
+  padding: 0;
+  margin: 0;
+  list-style-type:circle;
+  list-style-position: outside;
+}
+.PlaygroundEditorTheme__ul5 {
+  padding: 0;
+  margin: 0;
+  list-style-type:disc;
+  list-style-position: outside;
+}
+
+
+.PlaygroundEditorTheme__nestedListItem {
+  list-style-type: none;
+}
+.PlaygroundEditorTheme__nestedListItem:before,
+.PlaygroundEditorTheme__nestedListItem:after {
+  display: none;
+}