Added Basic Youtube Embed feature + Word Counter

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

@@ -32,6 +32,7 @@ const TailwindAdvancedEditor = () => {
     null,
   );
   const [saveStatus, setSaveStatus] = useState("Saved");
+  const [charsCount, setCharsCount] = useState();
 
   const [openNode, setOpenNode] = useState(false);
   const [openColor, setOpenColor] = useState(false);
@@ -43,6 +44,7 @@ const TailwindAdvancedEditor = () => {
       const json = editor.getJSON();
 
       window.localStorage.setItem("novel-content", JSON.stringify(json));
+      setCharsCount(editor.storage.characterCount.words());
       setSaveStatus("Saved");
     },
     500,
@@ -58,9 +60,15 @@ 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
           initialContent={initialContent}

apps/web/components/tailwind/extensions.ts

@@ -2,6 +2,8 @@ import {
   TiptapImage,
   TiptapLink,
   UpdatedImage,
+  Youtube,
+  CharacterCount,
   TaskList,
   TaskItem,
   HorizontalRule,
@@ -11,6 +13,7 @@ import {
 } from "novel/extensions";
 import { UploadImagesPlugin } from "novel/plugins";
 
+
 import { cx } from "class-variance-authority";
 
 //TODO I am using cx here to get tailwind autocomplete working, idk if someone else can write a regex to just capture the class key in objects
@@ -25,6 +28,15 @@ const tiptapLink = TiptapLink.configure({
   },
 });
 
+const youtube = Youtube.configure({
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+  inline: false,
+});
+
+const characterCount = CharacterCount.configure();
+
 const tiptapImage = TiptapImage.extend({
   addProseMirrorPlugins() {
     return [
@@ -112,6 +124,8 @@ export const defaultExtensions = [
   tiptapLink,
   tiptapImage,
   updatedImage,
+  youtube,
+  characterCount,
   taskList,
   taskItem,
   horizontalRule,

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";
@@ -151,6 +152,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

@@ -40,6 +40,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-character-count": "^2.3.0",
     "@tiptap/extension-color": "^2.1.7",
     "@tiptap/extension-highlight": "^2.1.7",
     "@tiptap/extension-horizontal-rule": "^2.1.7",
@@ -50,18 +51,19 @@
     "@tiptap/extension-task-list": "^2.1.7",
     "@tiptap/extension-text-style": "^2.1.7",
     "@tiptap/extension-underline": "^2.1.7",
+    "@tiptap/extension-youtube": "^2.3.0",
     "@tiptap/pm": "^2.1.7",
     "@tiptap/react": "^2.1.7",
     "@tiptap/starter-kit": "^2.1.7",
     "@tiptap/suggestion": "^2.1.7",
-    "tiptap-extension-auto-joiner": "^0.1.1",
-    "tiptap-extension-global-drag-handle": "^0.1.6",
     "@types/node": "18.15.3",
     "cmdk": "^0.2.1",
     "jotai": "^2.6.4",
     "react-markdown": "^8.0.7",
     "react-moveable": "^0.56.0",
     "tippy.js": "^6.3.7",
+    "tiptap-extension-auto-joiner": "^0.1.1",
+    "tiptap-extension-global-drag-handle": "^0.1.6",
     "tiptap-markdown": "^0.8.9",
     "tunnel-rat": "^0.1.2"
   },

packages/headless/src/extensions/index.ts

@@ -4,6 +4,8 @@ import TiptapLink from "@tiptap/extension-link";
 import TiptapImage from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
 import TiptapUnderline from "@tiptap/extension-underline";
+import Youtube from "@tiptap/extension-youtube";
+import CharacterCount from "@tiptap/extension-character-count";
 import TextStyle from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import { TaskItem } from "@tiptap/extension-task-item";
@@ -80,6 +82,8 @@ export {
   TaskList,
   InputRule,
   ImageResizer,
+  Youtube,
+  CharacterCount,
 };
 export * from "./ai-highlight";
 export * from "./slash-command";