feat: enhance editor component with markdown support and additional p…

src/stories/editor/_types.tsx

@@ -9,11 +9,14 @@ export interface EditorArgs extends Partial<EditorOptions> {
   hasInlineMenu?: boolean;
   bubbleOptions?: any;
   headerTitle?: string;
+  className?: string;
   footerSaveText?: string;
   /** Applies validation state styling */
   validation?: validationStatus;
   onSave?: (editor: Editor) => void;
   disableSaveShortcut?: boolean;
+  disableHeader?: boolean;
+  contentType?: "markdown";
 }
 
 export interface EditorHeaderArgs {

src/stories/editor/index.stories.tsx

@@ -32,6 +32,9 @@ Markdown.args = {
   ...defaultArgs,
   children: "# Hello i'm a markdown title",
   contentType: "markdown",
+  disableHeader: true,
+  className: "markdown-editor",
+  disableSaveShortcut: true,
 };
 
 export const Placeholder = Template.bind({});

src/stories/editor/index.tsx

@@ -72,6 +72,8 @@ const Editor = ({
   footerSaveText,
   placeholderOptions,
   extensions,
+  disableHeader,
+  className,
   ...props
 }: PropsWithChildren<EditorArgs>) => {
   const {
@@ -135,10 +137,16 @@ const Editor = ({
   ed.on("update", ({ editor }) => setActiveEditor(editor as TipTapEditor));
 
   return (
-    <EditorContainer editable={isEditable} validation={props.validation}>
+    <EditorContainer
+      className={className}
+      editable={isEditable}
+      validation={props.validation}
+    >
       {isEditable && (
         <>
-          <EditorHeader title={headerTitle} validation={props.validation} />
+          {!disableHeader && (
+            <EditorHeader title={headerTitle} validation={props.validation} />
+          )}
           {hasInlineMenu && <FloatingMenu editor={ed} />}
         </>
       )}