feat: move away from carbon components and TinyMCE (#597)

* feat: remove tinymce & replace org sidebar

* chore: PR Fixes

* chore: move ui font into src dir

* remove files in vite config

* use google font import for loading font

* remove custom font

* more fonts update

* remove font bold

* more removals of font bold

* fix import

* checkpoint

* chore: checkpoint (add course & lms shadcn sidebar)

* minor css improvements and try out font sans

* chore: replace carbon components with shadcn's

* chore: replace carbon components with shadcn _ v3

* chore: ui fixes & storybook update

* feat: UI cleanup

* fix: quick ui fixes

* chore: update pnpm-lock.yaml with new dependencies and versions; fix output.css formatting

* chore: add isloading to button

* feat: add loading state to button stories

* chore: feedback fixes

* fix: feedback fixes

* chore: remove console

* fix: PR comments

* fix: PR comments

---------

Co-authored-by: Rotimi Best <[email protected]>

packages/ui/src/custom/editor/editor.svelte

@@ -22,6 +22,8 @@
     class?: string;
     // CSS class for the editor itself
     editorClass?: string;
+    // Placeholder text for the editor
+    placeholder?: string | ((node: any) => string);
     // Callback functions
     onContentChange?: (content: Content) => void;
     onEditorReady?: (editor: Editor) => void;
@@ -37,6 +39,7 @@
     editableStorageKey = 'edra-editable',
     class: className = '',
     editorClass = '',
+    placeholder,
     onContentChange,
     onEditorReady,
     onEditorDestroy
@@ -111,7 +114,7 @@
 
   function onUpdate(props: { editor: Editor; transaction: Transaction }) {
     if (props?.editor && !props.editor.isDestroyed) {
-      const newContent = props.editor.getJSON();
+      const newContent = props.editor.getHTML();
       content = newContent;
       onContentChange?.(newContent);
     }
@@ -119,12 +122,7 @@
 </script>
 
 {#if browser}
-  <div
-    class={cn(
-      'bg-background z-50 mx-auto mt-12 flex size-full w-[95%] max-w-5xl flex-col rounded-md border border-dashed sm:w-[85%]',
-      className
-    )}
-  >
+  <div class={cn('bg-background z-50 flex size-full w-full flex-col rounded-md border border-dashed', className)}>
     {#if editor && !editor.isDestroyed}
       {#if showToolBar}
         <div transition:slide>
@@ -142,8 +140,9 @@
       class={cn('h-[32rem] overflow-auto p-4', editorClass)}
       bind:editor
       {editable}
-      content={content || getDefaultContent()}
+      {content}
       {onUpdate}
+      {placeholder}
     />
   </div>
 {/if}

packages/ui/src/custom/editor/editor.ts

@@ -21,7 +21,8 @@ export default (
   element?: HTMLElement,
   content?: Content,
   extensions?: Extensions,
-  options?: Partial<EditorOptions>
+  options?: Partial<EditorOptions>,
+  placeholder?: string | ((node: any) => string)
 ) => {
   const editor = new Editor({
     element,
@@ -55,14 +56,16 @@ export default (
         emptyEditorClass: 'is-empty',
         // Use a placeholder:
         // Use different placeholders depending on the node type:
-        placeholder: ({ node }) => {
-          if (node.type.name === 'heading') {
-            return 'What’s the title?';
-          } else if (node.type.name === 'paragraph') {
-            return 'Press / or write something ...';
-          }
-          return '';
-        }
+        placeholder:
+          placeholder ||
+          (({ node }) => {
+            if (node.type.name === 'heading') {
+              return "What's the title?";
+            } else if (node.type.name === 'paragraph') {
+              return 'Press / or write something ...';
+            }
+            return '';
+          })
       }),
       Color,
       Subscript,

packages/ui/src/custom/editor/index.ts

@@ -1 +1,2 @@
 export { default as Editor } from './editor.svelte';
+export type { Content, Editor as TiptapEditor } from '@tiptap/core';

packages/ui/src/custom/editor/types.ts

@@ -5,6 +5,7 @@ import type { EditorView } from '@tiptap/pm/view';
 import type { Snippet } from 'svelte';
 
 export interface EdraEditorProps {
+  placeholder?: string | ((node: any) => string);
   content?: Content;
   editable?: boolean;
   editor?: Editor;

packages/ui/src/custom/editor/ui/editor.svelte

@@ -33,6 +33,7 @@
   import '../editor.css';
   import './style.css';
   import '../onedark.css';
+  import { Placeholder } from '@tiptap/extensions';
 
   const lowlight = createLowlight(all);
 
@@ -46,7 +47,8 @@
     content,
     onUpdate,
     autofocus = false,
-    class: className
+    class: className,
+    placeholder = ''
   }: EdraEditorProps = $props();
 
   onMount(() => {
@@ -69,7 +71,10 @@
         AudioExtended(AudioExtendedComp),
         IFramePlaceholder(IFramePlaceHolderComp),
         IFrameExtended(IFrameExtendedComp),
-        slashcommand(SlashCommandList)
+        slashcommand(SlashCommandList),
+        Placeholder.configure({
+          placeholder
+        })
       ],
       {
         onUpdate,
@@ -79,7 +84,8 @@
         },
         editable,
         autofocus
-      }
+      },
+      placeholder
     );
   });