feat: Basic YT Embeds + CharCount Support

apps/web/components/tailwind/advanced-editor.tsx

@@ -30,6 +30,7 @@ const extensions = [...defaultExtensions, slashCommand];
 const TailwindAdvancedEditor = () => {
   const [initialContent, setInitialContent] = useState<null | JSONContent>(null);
   const [saveStatus, setSaveStatus] = useState("Saved");
+  const [charsCount, setCharsCount] = useState();
 
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
@@ -38,6 +39,7 @@ const TailwindAdvancedEditor = () => {
 
   const debouncedUpdates = useDebouncedCallback(async (editor: EditorInstance) => {
     const json = editor.getJSON();
+    setCharsCount(editor.storage.characterCount.words());
     window.localStorage.setItem("html-content", editor.getHTML());
     window.localStorage.setItem("novel-content", JSON.stringify(json));
     window.localStorage.setItem("markdown", editor.storage.markdown.getMarkdown());
@@ -54,8 +56,13 @@ const TailwindAdvancedEditor = () => {
 
   return (
     <div className="relative w-full max-w-screen-lg">
-      <div className="absolute right-5 top-5 z-10 mb-5 rounded-lg bg-accent px-2 py-1 text-sm text-muted-foreground">
-        {saveStatus}
+      <div className="flex absolute right-5 top-5 z-10 mb-5 gap-2">
+        <div className="rounded-lg bg-accent px-2 py-1 text-sm text-muted-foreground">
+          {saveStatus}
+        </div>
+        <div className={charsCount ? "rounded-lg bg-accent px-2 py-1 text-sm text-muted-foreground" : "hidden"}>
+          {charsCount} Words
+        </div>
       </div>
       <EditorRoot>
         <EditorContent

apps/web/components/tailwind/extensions.ts

@@ -9,6 +9,8 @@ import {
   TiptapImage,
   TiptapLink,
   UpdatedImage,
+  Youtube,
+  CharacterCount,
 } from "novel/extensions";
 import { UploadImagesPlugin } from "novel/plugins";
 
@@ -112,6 +114,16 @@ const codeBlockLowlight = CodeBlockLowlight.configure({
   lowlight: createLowlight(common),
 });
 
+const youtube = Youtube.configure({
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+  inline: false,
+});
+
+const characterCount = CharacterCount.configure();
+
+
 export const defaultExtensions = [
   starterKit,
   placeholder,
@@ -123,4 +135,6 @@ export const defaultExtensions = [
   horizontalRule,
   aiHighlight,
   codeBlockLowlight,
+  youtube,
+  characterCount,
 ];

apps/web/components/tailwind/slash-command.tsx

@@ -10,6 +10,7 @@ import {
   MessageSquarePlus,
   Text,
   TextQuote,
+  Youtube,
 } from "lucide-react";
 import { createSuggestionItems } from "novel/extensions";
 import { Command, renderItems } from "novel/extensions";
@@ -124,6 +125,28 @@ export const suggestionItems = createSuggestionItems([
       input.click();
     },
   },
+  {
+    title: "Youtube",
+    description: "Embed a Youtube video.",
+    searchTerms: ["video", "youtube", "embed"],
+    icon: <Youtube size={18} />,
+    command: ({ editor, range }) => {
+      let videoLink = prompt("Please enter Youtube Video Link");
+      //From https://regexr.com/3dj5t
+      const ytregex = new RegExp(/^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/);
+
+      if (ytregex.test(videoLink)) {
+        editor.chain().focus().deleteRange(range).setYoutubeVideo({
+          src: videoLink,
+        }).run();
+      } else {
+        if (videoLink !== null) {
+          alert("Please enter a correct Youtube Video Link")
+        }
+      }
+
+    },
+  },
 ]);
 
 export const slashCommand = Command.configure({

apps/web/styles/prosemirror.css

@@ -168,3 +168,36 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 .dark .drag-handle {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
 }
+
+/* Custom Youtube Video CSS */
+iframe {
+  border: 8px solid #ffd00027;
+  border-radius: 4px;
+  min-width: 200px;
+  min-height: 200px;
+  display: block;
+  outline: 0px solid transparent;
+}
+
+div[data-youtube-video] > iframe {
+  cursor: move;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+
+.ProseMirror-selectednode iframe {
+  transition: outline 0.15s;
+  outline: 6px solid #fbbf24;
+}
+
+@media only screen and (max-width: 480px) {
+  div[data-youtube-video] > iframe {
+    max-height: 50px;
+  }
+}
+
+@media only screen and (max-width: 720px) {
+  div[data-youtube-video] > iframe {
+    max-height: 100px;
+  }
+}

packages/headless/package.json

@@ -42,6 +42,8 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-character-count": "^2.3.0",
+    "@tiptap/extension-youtube": "^2.3.0",
     "@tiptap/extension-code-block-lowlight": "^2.2.6",
     "@tiptap/extension-color": "^2.1.7",
     "@tiptap/extension-highlight": "^2.1.7",
@@ -92,4 +94,4 @@
     "nextjs",
     "react"
   ]
-}
+}

packages/headless/src/extensions/index.ts

@@ -17,6 +17,8 @@ import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import UpdatedImage from "./updated-image";
 
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Youtube from "@tiptap/extension-youtube";
+import CharacterCount from "@tiptap/extension-character-count";
 
 const PlaceholderExtension = Placeholder.configure({
   placeholder: ({ node }) => {
@@ -80,6 +82,8 @@ export {
   TiptapLink,
   UpdatedImage,
   simpleExtensions,
+  Youtube,
+  CharacterCount,
 };
 
 // Todo: Maybe I should create an utils entry