@collabchron/notiq 0.2.0 → 1.0.0

package/src/components/editor/nodes/PollNode/index.tsx

@@ -1,204 +0,0 @@
-import {
-  DecoratorNode,
-  DOMConversionMap,
-  DOMConversionOutput,
-  DOMExportOutput,
-  LexicalNode,
-  NodeKey,
-  SerializedLexicalNode,
-  Spread,
-} from "lexical";
-import * as React from "react";
-import { Suspense } from "react";
-
-export type Options = ReadonlyArray<Option>;
-
-export type Option = Readonly<{
-  text: string;
-  uid: string;
-  votes: Array<string>;
-}>;
-
-const PollComponent = React.lazy(
-  () => import("@/components/ui/poll/poll-component")
-);
-
-function createUID(): string {
-  return Math.random()
-    .toString(36)
-    .replace(/[^a-z]+/g, "")
-    .substr(0, 5);
-}
-
-export function createPollOption(text = ""): Option {
-  return {
-    text,
-    uid: createUID(),
-    votes: [],
-  };
-}
-
-function cloneOption(
-  option: Option,
-  text: string,
-  votes?: Array<string>
-): Option {
-  return {
-    text,
-    uid: option.uid,
-    votes: votes || Array.from(option.votes),
-  };
-}
-
-export type SerializedPollNode = Spread<
-  {
-    question: string;
-    options: Options;
-  },
-  SerializedLexicalNode
->;
-
-function $convertPollElement(domNode: HTMLElement): DOMConversionOutput | null {
-  const question = domNode.getAttribute("data-lexical-poll-question");
-  const options = domNode.getAttribute("data-lexical-poll-options");
-  if (question !== null && options !== null) {
-    const node = $createPollNode(question, JSON.parse(options));
-    return { node };
-  }
-  return null;
-}
-
-export class PollNode extends DecoratorNode<React.JSX.Element> {
-  __question: string;
-  __options: Options;
-
-  static getType(): string {
-    return "poll";
-  }
-
-  static clone(node: PollNode): PollNode {
-    return new PollNode(node.__question, node.__options, node.__key);
-  }
-
-  static importJSON(serializedNode: SerializedPollNode): PollNode {
-    return $createPollNode(
-      serializedNode.question,
-      serializedNode.options
-    ).updateFromJSON(serializedNode);
-  }
-
-  constructor(question: string, options: Options, key?: NodeKey) {
-    super(key);
-    this.__question = question;
-    this.__options = options;
-  }
-
-  exportJSON(): SerializedPollNode {
-    return {
-      ...super.exportJSON(),
-      options: this.__options,
-      question: this.__question,
-    };
-  }
-
-  setQuestion(newQuestion: string): void {
-    const self = this.getWritable();
-    self.__question = newQuestion;
-  }
-
-  addOption(option: Option): void {
-    const self = this.getWritable();
-    const options = Array.from(self.__options);
-    options.push(option);
-    self.__options = options;
-  }
-
-  deleteOption(option: Option): void {
-    const self = this.getWritable();
-    const options = Array.from(self.__options);
-    const index = options.indexOf(option);
-    options.splice(index, 1);
-    self.__options = options;
-  }
-
-  setOptionText(option: Option, text: string): void {
-    const self = this.getWritable();
-    const clonedOption = cloneOption(option, text);
-    const options = Array.from(self.__options);
-    const index = options.indexOf(option);
-    options[index] = clonedOption;
-    self.__options = options;
-  }
-
-  toggleVote(option: Option, clientID: string): void {
-    const self = this.getWritable();
-    const newOptions = self.__options.map((opt) => {
-      if (opt.uid === option.uid) {
-        const newVotes = opt.votes.includes(clientID)
-          ? opt.votes.filter((id) => id !== clientID)
-          : [...opt.votes, clientID];
-        return { ...opt, votes: newVotes };
-      }
-      return { ...opt };
-    });
-
-    self.__options = newOptions;
-    this.markDirty();
-  }
-
-  static importDOM(): DOMConversionMap | null {
-    return {
-      span: (domNode: HTMLElement) => {
-        if (!domNode.hasAttribute("data-lexical-poll-question")) {
-          return null;
-        }
-        return {
-          conversion: $convertPollElement,
-          priority: 2,
-        };
-      },
-    };
-  }
-
-  exportDOM(): DOMExportOutput {
-    const element = document.createElement("span");
-    element.setAttribute("data-lexical-poll-question", this.__question);
-    element.setAttribute(
-      "data-lexical-poll-options",
-      JSON.stringify(this.__options)
-    );
-    return { element };
-  }
-
-  createDOM(): HTMLElement {
-    const elem = document.createElement("span");
-    elem.style.display = "inline-block";
-    return elem;
-  }
-
-  updateDOM(): false {
-    return false;
-  }
-
-  decorate(): React.JSX.Element {
-    return (
-      <Suspense fallback={null}>
-        <PollComponent
-          question={this.__question}
-          options={this.__options}
-          nodeKey={this.__key}
-        />
-      </Suspense>
-    );
-  }
-}
-
-export function $createPollNode(question: string, options: Options): PollNode {
-  return new PollNode(question, options);
-}
-
-export function $isPollNode(
-  node: LexicalNode | null | undefined
-): node is PollNode {
-  return node instanceof PollNode;
-}

package/src/components/editor/nodes/TweetNode/index.tsx

@@ -1,214 +0,0 @@
-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";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Skeleton } from "@/components/ui/skeleton";
-
-const WIDGET_SCRIPT_URL = "https://platform.twitter.com/widgets.js";
-
-type TweetComponentProps = Readonly<{
-  className: Readonly<{
-    base: string;
-    focus: string;
-  }>;
-  format: ElementFormatType | null;
-  loadingComponent?: React.JSX.Element | string;
-  nodeKey: NodeKey;
-  onError?: (error: string) => void;
-  onLoad?: () => void;
-  tweetID: string;
-}>;
-
-function $convertTweetElement(
-  domNode: HTMLDivElement
-): DOMConversionOutput | null {
-  const id = domNode.getAttribute("data-lexical-tweet-id");
-  if (id) {
-    const node = $createTweetNode(id);
-    return { node };
-  }
-  return null;
-}
-
-let isTwitterScriptLoading = true;
-
-function TweetComponent({
-  className,
-  format,
-  nodeKey,
-  onError,
-  onLoad,
-  tweetID,
-}: TweetComponentProps) {
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const previousTweetIDRef = useRef<string>("");
-  const [isTweetLoading, setIsTweetLoading] = useState(false);
-
-  const createTweet = useCallback(async () => {
-    try {
-      // @ts-expect-error Twitter is attached to the window.
-      await window.twttr.widgets.createTweet(tweetID, containerRef.current);
-
-      setIsTweetLoading(false);
-      isTwitterScriptLoading = false;
-
-      if (onLoad) {
-        onLoad();
-      }
-    } catch (error) {
-      if (onError) {
-        onError(String(error));
-      }
-    }
-  }, [onError, onLoad, tweetID]);
-
-  useEffect(() => {
-    if (tweetID !== previousTweetIDRef.current) {
-      setIsTweetLoading(true);
-
-      if (isTwitterScriptLoading) {
-        const script = document.createElement("script");
-        script.src = WIDGET_SCRIPT_URL;
-        script.async = true;
-        document.body?.appendChild(script);
-        script.onload = createTweet;
-        if (onError) {
-          script.onerror = onError as OnErrorEventHandler;
-        }
-      } else {
-        createTweet();
-      }
-
-      if (previousTweetIDRef) {
-        previousTweetIDRef.current = tweetID;
-      }
-    }
-  }, [createTweet, onError, tweetID]);
-
-  return (
-    <BlockWithAlignableContents
-      className={className}
-      format={format}
-      nodeKey={nodeKey}
-    >
-      {isTweetLoading ? (
-        <Skeleton className="max-h-[200px] w-full h-full max-w-[400px]" />
-      ) : null}
-      <div
-        style={{ 
-          display: "inline-block", 
-          width: "100%",
-         }}
-        ref={containerRef}
-      />
-    </BlockWithAlignableContents>
-  );
-}
-
-export type SerializedTweetNode = Spread<
-  {
-    id: string;
-  },
-  SerializedDecoratorBlockNode
->;
-
-export class TweetNode extends DecoratorBlockNode {
-  __id: string;
-
-  static getType(): string {
-    return "tweet";
-  }
-
-  static clone(node: TweetNode): TweetNode {
-    return new TweetNode(node.__id, node.__format, node.__key);
-  }
-
-  static importJSON(serializedNode: SerializedTweetNode): TweetNode {
-    return $createTweetNode(serializedNode.id).updateFromJSON(serializedNode);
-  }
-
-  exportJSON(): SerializedTweetNode {
-    return {
-      ...super.exportJSON(),
-      id: this.getId(),
-    };
-  }
-
-  static importDOM(): DOMConversionMap<HTMLDivElement> | null {
-    return {
-      div: (domNode: HTMLDivElement) => {
-        if (!domNode.hasAttribute("data-lexical-tweet-id")) {
-          return null;
-        }
-        return {
-          conversion: $convertTweetElement,
-          priority: 2,
-        };
-      },
-    };
-  }
-
-  exportDOM(): DOMExportOutput {
-    const element = document.createElement("div");
-    element.setAttribute("data-lexical-tweet-id", this.__id);
-    const text = document.createTextNode(this.getTextContent());
-    element.append(text);
-    return { element };
-  }
-
-  constructor(id: string, format?: ElementFormatType, key?: NodeKey) {
-    super(format, key);
-    this.__id = id;
-  }
-
-  getId(): string {
-    return this.__id;
-  }
-
-  getTextContent(): string {
-    return `https://x.com/i/web/status/${this.__id}`;
-  }
-
-  decorate(editor: LexicalEditor, config: EditorConfig): React.JSX.Element {
-    const embedBlockTheme = config.theme.embedBlock || {};
-    const className = {
-      base: embedBlockTheme.base || "",
-      focus: embedBlockTheme.focus || "",
-    };
-    return (
-      <TweetComponent
-        className={className}
-        format={this.__format}
-        loadingComponent="Loading..."
-        nodeKey={this.getKey()}
-        tweetID={this.__id}
-      />
-    );
-  }
-}
-
-export function $createTweetNode(tweetID: string): TweetNode {
-  return new TweetNode(tweetID);
-}
-
-export function $isTweetNode(
-  node: TweetNode | LexicalNode | null | undefined
-): node is TweetNode {
-  return node instanceof TweetNode;
-}

package/src/components/editor/nodes/index.ts

@@ -1,81 +0,0 @@
-
-import type {Klass, LexicalNode} from 'lexical';
-
-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 { ImageNode } from './ImageNode';
-import { PollNode } from './PollNode';
-import { LayoutItemNode } from './LayoutNode/LayoutItemNode';
-import { LayoutContainerNode } from './LayoutNode/LayoutContainerNode';
-import { CollapsibleContainerNode } from './CollapsibleNode/CollapsibleContainerNode';
-import { CollapsibleContentNode } from './CollapsibleNode/CollapsibleContentNode';
-import { CollapsibleTitleNode } from './CollapsibleNode/CollapsibleTitleNode';
-import { LinkWithMetaDataNode } from '../plugins/LinkWithMetaData';
-import { TweetNode } from './TweetNode';
-import { YouTubeNode } from '../plugins/YouTubeNode';
-import { Hint } from './Hint';
-import { StepperNode } from './Stepper';
-import { InlineImageNode } from './InlineImageNode/InlineImageNode';
-import { ExcalidrawNode } from './ExcalidrawNode';
-import { FigmaNode } from './FigmaNode/FigmaNode';
-import { EquationNode } from './EquationNode/EquationNode';
-
-
-
-const nodes: Array<Klass<LexicalNode>> = [
-  HeadingNode,
-  ListNode,
-  ListItemNode,
-  QuoteNode,
-  CodeNode,
-  TableNode,
-  TableCellNode,
-  TableRowNode,
-  CodeHighlightNode,
-  StepperNode,
-  AutoLinkNode,
-  YouTubeNode,
-  Hint,
-  TweetNode,
-  LinkNode,
-  OverflowNode,
-  HorizontalRuleNode,
-  MarkNode,
-  ImageNode,
-  PollNode,
-  LayoutItemNode,
-  LayoutContainerNode,
-  CollapsibleContainerNode,
-  CollapsibleContentNode,
-  CollapsibleTitleNode,
-  LinkWithMetaDataNode,
-  InlineImageNode,
-  ExcalidrawNode,
-  FigmaNode,
-  EquationNode,
-];
-
-export  const nestedNodes: Array<Klass<LexicalNode>>=[
-  HeadingNode,
-  ListNode,
-  ListItemNode,
-  LinkNode,
-  CodeHighlightNode,
-  QuoteNode,
-  CodeNode,
-  StepperNode,
-  LinkWithMetaDataNode,
-  ImageNode,
-  InlineImageNode,
-  ExcalidrawNode,
-  FigmaNode,
-  EquationNode,
-]
-export default nodes