@rimori/client 1.0.5 → 1.1.0

package/dist/providers/PluginController.d.ts

@@ -0,0 +1,21 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+import { RimoriClient } from "../plugin/RimoriClient";
+export declare class PluginController {
+    private static client;
+    private static instance;
+    private communicationSecret;
+    private supabase;
+    private supabaseInfo;
+    private pluginId;
+    private constructor();
+    static getInstance(sender: string): Promise<RimoriClient>;
+    private getSecret;
+    getClient(): Promise<{
+        supabase: SupabaseClient;
+        tablePrefix: string;
+        pluginId: string;
+    }>;
+    getToken(): Promise<string>;
+    getSupabaseUrl(): string;
+    getGlobalEventTopic(preliminaryTopic: string): string;
+}

package/dist/providers/PluginController.js

@@ -0,0 +1,116 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createClient } from '@supabase/supabase-js';
+import { EventBus } from '../plugin/fromRimori/EventBus';
+import { RimoriClient } from "../plugin/RimoriClient";
+import { setTheme } from '../plugin/ThemeSetter';
+export class PluginController {
+    constructor(pluginId) {
+        this.communicationSecret = null;
+        this.supabase = null;
+        this.supabaseInfo = null;
+        this.pluginId = pluginId;
+        this.getClient = this.getClient.bind(this);
+        if (typeof WorkerGlobalScope === 'undefined') {
+            setTheme();
+        }
+        window.addEventListener("message", (event) => {
+            // console.log("client: message received", event);
+            const { topic, sender, data, eventId } = event.data.event;
+            // skip forwarding messages from own plugin
+            if (sender === pluginId)
+                return;
+            EventBus.emit(sender, topic, data, eventId);
+        });
+        EventBus.on("*", (event) => {
+            // skip messages which are not from the own plugin
+            if (event.sender !== this.pluginId)
+                return;
+            if (event.topic.startsWith("self."))
+                return;
+            window.parent.postMessage({ event, secret: this.getSecret() }, "*");
+        });
+    }
+    static getInstance(sender) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!PluginController.instance) {
+                PluginController.instance = new PluginController(sender);
+                PluginController.client = yield RimoriClient.getInstance(PluginController.instance);
+            }
+            return PluginController.client;
+        });
+    }
+    getSecret() {
+        if (!this.communicationSecret) {
+            const secret = new URLSearchParams(window.location.search).get("secret");
+            if (!secret) {
+                throw new Error("Communication secret not found in URL as query parameter");
+            }
+            this.communicationSecret = secret;
+        }
+        return this.communicationSecret;
+    }
+    getClient() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.supabase &&
+                this.supabaseInfo &&
+                this.supabaseInfo.expiration > new Date()) {
+                return { supabase: this.supabase, tablePrefix: this.supabaseInfo.tablePrefix, pluginId: this.supabaseInfo.pluginId };
+            }
+            const { data } = yield EventBus.request(this.pluginId, "global.supabase.requestAccess");
+            this.supabaseInfo = data;
+            this.supabase = createClient(this.supabaseInfo.url, this.supabaseInfo.key, {
+                accessToken: () => Promise.resolve(this.getToken())
+            });
+            return { supabase: this.supabase, tablePrefix: this.supabaseInfo.tablePrefix, pluginId: this.supabaseInfo.pluginId };
+        });
+    }
+    getToken() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.supabaseInfo && this.supabaseInfo.expiration && this.supabaseInfo.expiration > new Date()) {
+                return this.supabaseInfo.token;
+            }
+            const { data } = yield EventBus.request(this.pluginId, "global.supabase.requestAccess");
+            if (!this.supabaseInfo) {
+                throw new Error("Supabase info not found");
+            }
+            this.supabaseInfo.token = data.token;
+            this.supabaseInfo.expiration = data.expiration;
+            return this.supabaseInfo.token;
+        });
+    }
+    getSupabaseUrl() {
+        if (!this.supabaseInfo) {
+            throw new Error("Supabase info not found");
+        }
+        return this.supabaseInfo.url;
+    }
+    getGlobalEventTopic(preliminaryTopic) {
+        var _a, _b;
+        if (preliminaryTopic.startsWith("global.")) {
+            return preliminaryTopic;
+        }
+        if (preliminaryTopic.startsWith("self.")) {
+            return preliminaryTopic;
+        }
+        const topicParts = preliminaryTopic.split(".");
+        if (topicParts.length === 3) {
+            if (!topicParts[0].startsWith("pl") && topicParts[0] !== "global") {
+                throw new Error("The event topic must start with the plugin id or 'global'.");
+            }
+            return preliminaryTopic;
+        }
+        else if (topicParts.length > 3) {
+            throw new Error(`The event topic must consist of 3 parts. <pluginId>.<topic area>.<action>. Received: ${preliminaryTopic}`);
+        }
+        const topicRoot = (_b = (_a = this.supabaseInfo) === null || _a === void 0 ? void 0 : _a.pluginId) !== null && _b !== void 0 ? _b : "global";
+        return `${topicRoot}.${preliminaryTopic}`;
+    }
+}

package/dist/providers/PluginProvider.js

@@ -1,33 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from 'react';
 import { PluginController } from '../plugin/PluginController';
 import { EventBusHandler } from '../plugin/fromRimori/EventBus';
-EventBusHandler.getInstance("Plugin EventBus");
+import ContextMenu from '../core/components/ContextMenu';
 const PluginContext = createContext(null);
 export const PluginProvider = ({ children, pluginId }) => {
     const [plugin, setPlugin] = useState(null);
-    const [contextMenuOnSelect, setContextMenuOnTextSelection] = useState(false);
-    //route change
+    initEventBus(pluginId);
     useEffect(() => {
-        let lastHash = window.location.hash;
-        setInterval(() => {
-            if (lastHash !== window.location.hash) {
-                lastHash = window.location.hash;
-                console.log('url changed:', lastHash);
-                plugin === null || plugin === void 0 ? void 0 : plugin.event.emit('session.triggerUrlChange', window.location.hash);
-            }
-        }, 100);
         PluginController.getInstance(pluginId).then(setPlugin);
-    }, []);
-    //check if context menu opens on text selection
+    }, [pluginId]);
+    //route change
     useEffect(() => {
         if (!plugin)
             return;
-        plugin.plugin.getUserInfo().then((userInfo) => {
-            setContextMenuOnTextSelection(userInfo.contextMenuOnSelect);
-        }).catch(error => {
-            console.error('Error fetching settings:', error);
-        });
+        const url = new URL(window.location.href);
+        //sidebar pages should not report url changes
+        if (url.searchParams.get("applicationMode") === "sidebar")
+            return;
+        let lastHash = url.hash;
+        const emitUrlChange = (url) => plugin.event.emit('session.triggerUrlChange', { url });
+        const interval = setInterval(() => {
+            if (lastHash === window.location.hash)
+                return;
+            lastHash = window.location.hash;
+            // console.log('url changed:', lastHash);
+            emitUrlChange(lastHash);
+        }, 1000);
+        emitUrlChange(lastHash);
+        return () => clearInterval(interval);
     }, [plugin]);
     //detect page height change
     useEffect(() => {
@@ -37,63 +38,10 @@ export const PluginProvider = ({ children, pluginId }) => {
         handleResize();
         return () => body.removeEventListener('resize', handleResize);
     }, [plugin]);
-    //context menu
-    useEffect(() => {
-        let lastMouseX = 0;
-        let lastMouseY = 0;
-        let isSelecting = false;
-        // Track mouse position
-        const handleMouseMove = (e) => {
-            lastMouseX = e.clientX;
-            lastMouseY = e.clientY;
-        };
-        const handleContextMenu = (e) => {
-            var _a;
-            const selection = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
-            if (selection) {
-                e.preventDefault();
-                // console.log('context menu handled', selection);
-                plugin === null || plugin === void 0 ? void 0 : plugin.event.emit('global.contextMenu.trigger', { text: selection, x: e.clientX, y: e.clientY, open: true });
-            }
-        };
-        const handleSelectionChange = () => {
-            var _a;
-            // if (triggerOnTextSelection) {
-            const selection = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString().trim();
-            const open = !!selection && isSelecting;
-            // console.log('Selection change, contextMenuOnSelect:', contextMenuOnSelect);
-            plugin === null || plugin === void 0 ? void 0 : plugin.event.emit('global.contextMenu.trigger', { text: selection, x: lastMouseX, y: lastMouseY, open });
-            // }
-        };
-        const handleMouseUpDown = (e) => {
-            if (e.type === 'mousedown') {
-                isSelecting = false;
-            }
-            else if (e.type === 'mouseup') {
-                isSelecting = true;
-                // console.log('mouseup, contextMenuOnSelect:', contextMenuOnSelect);
-                if (contextMenuOnSelect) {
-                    handleSelectionChange();
-                }
-            }
-        };
-        document.addEventListener('contextmenu', handleContextMenu);
-        document.addEventListener('selectionchange', handleSelectionChange);
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener('mousedown', handleMouseUpDown);
-        document.addEventListener('mouseup', handleMouseUpDown);
-        return () => {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener('contextmenu', handleContextMenu);
-            document.removeEventListener('selectionchange', handleSelectionChange);
-            document.removeEventListener('mousedown', handleMouseUpDown);
-            document.removeEventListener('mouseup', handleMouseUpDown);
-        };
-    }, [plugin, contextMenuOnSelect]);
     if (!plugin) {
         return "";
     }
-    return (_jsx(PluginContext.Provider, { value: plugin, children: children }));
+    return (_jsxs(PluginContext.Provider, { value: plugin, children: [_jsx(ContextMenu, { client: plugin }), children] }));
 };
 export const usePlugin = () => {
     const context = useContext(PluginContext);
@@ -102,3 +50,8 @@ export const usePlugin = () => {
     }
     return context;
 };
+function initEventBus(pluginId) {
+    const url = new URL(window.location.href);
+    const isSidebar = url.searchParams.get("applicationMode") === "sidebar";
+    EventBusHandler.getInstance("Plugin EventBus " + pluginId + " " + (isSidebar ? "sidebar" : "main"));
+}

package/dist/types/Actions.d.ts

@@ -0,0 +1,4 @@
+export type MainPanelAction = {
+    pluginId: string;
+    actionKey: string;
+} & Record<string, string>;

package/dist/types/Actions.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/Language.d.ts

@@ -0,0 +1,66 @@
+export declare const languageKeys: {
+    readonly sq: "albanian";
+    readonly ar: "arabic";
+    readonly hy: "armenian";
+    readonly az: "azerbaijani";
+    readonly bn: "bengali";
+    readonly bs: "bosnian";
+    readonly bg: "bulgarian";
+    readonly ca: "catalan";
+    readonly zh: "chinese";
+    readonly hr: "croatian";
+    readonly cs: "czech";
+    readonly da: "danish";
+    readonly nl: "dutch";
+    readonly en: "english";
+    readonly et: "estonian";
+    readonly fi: "finnish";
+    readonly fr: "french";
+    readonly gl: "galician";
+    readonly de: "german";
+    readonly el: "greek";
+    readonly he: "hebrew";
+    readonly hi: "hindi";
+    readonly hu: "hungarian";
+    readonly is: "icelandic";
+    readonly id: "indonesian";
+    readonly it: "italian";
+    readonly ja: "japanese";
+    readonly kn: "kannada";
+    readonly kk: "kazakh";
+    readonly ko: "korean";
+    readonly lv: "latvian";
+    readonly lt: "lithuanian";
+    readonly mk: "macedonian";
+    readonly ms: "malay";
+    readonly mr: "marathi";
+    readonly mi: "maori";
+    readonly ne: "nepali";
+    readonly no: "norwegian";
+    readonly fa: "persian";
+    readonly pl: "polish";
+    readonly pt: "portuguese";
+    readonly ro: "romanian";
+    readonly ru: "russian";
+    readonly sr: "serbian";
+    readonly sk: "slovak";
+    readonly sl: "slovenian";
+    readonly es: "spanish";
+    readonly sw: "swahili";
+    readonly sv: "swedish";
+    readonly tl: "filipino";
+    readonly ta: "tamil";
+    readonly th: "thai";
+    readonly tr: "turkish";
+    readonly uk: "ukrainian";
+    readonly ur: "urdu";
+    readonly vi: "vietnamese";
+    readonly cy: "welsh";
+};
+export type Language = keyof typeof languageKeys;
+/**
+ * Get the language name from the language code
+ * @param languageCode The code of the language
+ * @returns The language name
+ */
+export declare function getLanguageName(languageCode: Language): string;

package/dist/utils/Language.js

@@ -0,0 +1,67 @@
+export const languageKeys = {
+    sq: "albanian",
+    ar: "arabic",
+    hy: "armenian",
+    az: "azerbaijani",
+    bn: "bengali",
+    bs: "bosnian",
+    bg: "bulgarian",
+    ca: "catalan",
+    zh: "chinese",
+    hr: "croatian",
+    cs: "czech",
+    da: "danish",
+    nl: "dutch",
+    en: "english",
+    et: "estonian",
+    fi: "finnish",
+    fr: "french",
+    gl: "galician",
+    de: "german",
+    el: "greek",
+    he: "hebrew",
+    hi: "hindi",
+    hu: "hungarian",
+    is: "icelandic",
+    id: "indonesian",
+    it: "italian",
+    ja: "japanese",
+    kn: "kannada",
+    kk: "kazakh",
+    ko: "korean",
+    lv: "latvian",
+    lt: "lithuanian",
+    mk: "macedonian",
+    ms: "malay",
+    mr: "marathi",
+    mi: "maori",
+    ne: "nepali",
+    no: "norwegian",
+    fa: "persian",
+    pl: "polish",
+    pt: "portuguese",
+    ro: "romanian",
+    ru: "russian",
+    sr: "serbian",
+    sk: "slovak",
+    sl: "slovenian",
+    es: "spanish",
+    sw: "swahili",
+    sv: "swedish",
+    tl: "filipino",
+    ta: "tamil",
+    th: "thai",
+    tr: "turkish",
+    uk: "ukrainian",
+    ur: "urdu",
+    vi: "vietnamese",
+    cy: "welsh"
+};
+/**
+ * Get the language name from the language code
+ * @param languageCode The code of the language
+ * @returns The language name
+ */
+export function getLanguageName(languageCode) {
+    return languageKeys[languageCode];
+}

package/dist/utils/difficultyConverter.d.ts

@@ -1,3 +1,4 @@
 export type LanguageLevel = "Pre-A1" | "A1" | "A2" | "B1" | "B2" | "C1" | "C2" | "Post-C2";
 export declare function getDifficultyLevel(difficulty: LanguageLevel): number;
 export declare function getDifficultyLabel(difficulty: number): LanguageLevel;
+export declare function getNeighborDifficultyLevel(difficulty: LanguageLevel, difficultyAdjustment: number): LanguageLevel;

package/dist/utils/difficultyConverter.js

@@ -5,3 +5,6 @@ export function getDifficultyLevel(difficulty) {
 export function getDifficultyLabel(difficulty) {
     return codes[difficulty];
 }
+export function getNeighborDifficultyLevel(difficulty, difficultyAdjustment) {
+    return getDifficultyLabel(getDifficultyLevel(difficulty) + difficultyAdjustment);
+}

package/dist/worker/WorkerSetup.js

@@ -25,7 +25,7 @@ export function setupWorker(init) {
             postMessage: (message) => {
                 message.event.sender = "worker." + message.event.sender;
                 checkDebugMode(message.event);
-                logIfDebug('[Worker] sending event to Rimori', message.event);
+                logIfDebug('sending event to Rimori', message.event);
                 self.postMessage(message);
             }
         },
@@ -43,16 +43,16 @@ export function setupWorker(init) {
     // Handle init message from Rimori.
     self.onmessage = (response) => __awaiter(this, void 0, void 0, function* () {
         checkDebugMode(response.data);
-        logIfDebug('[Worker] message received', response.data);
+        logIfDebug('Message received', response.data);
         const event = response.data;
         if (event.topic === 'global.worker.requestInit') {
             if (!controller) {
                 mockWindow.APP_CONFIG.SUPABASE_URL = event.data.supabaseUrl;
                 mockWindow.APP_CONFIG.SUPABASE_ANON_KEY = event.data.supabaseAnonKey;
                 controller = yield PluginController.getInstance(event.data.pluginId);
-                logIfDebug('[Worker] Worker initialized.');
+                logIfDebug('Worker initialized.');
                 yield init(controller);
-                logIfDebug('[Worker] Plugin listeners initialized.');
+                logIfDebug('Plugin listeners initialized.');
             }
             const initEvent = {
                 timestamp: new Date().toISOString(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimori/client",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -19,7 +19,7 @@
   },
   "scripts": {
     "build": "tsc && sass src/style.scss:dist/style.css",
-    "dev": "tsc -w",
+    "dev": "tsc -w  --preserveWatchOutput",
     "css-dev": "sass --watch src/style.scss:dist/style.css"
   },
   "peerDependencies": {
@@ -30,7 +30,6 @@
     "@supabase/supabase-js": "^2.48.1",
     "@tiptap/react": "2.10.3",
     "@tiptap/starter-kit": "2.10.3",
-    "uuid": "11.1.0",
     "react-icons": "^5.4.0",
     "react-markdown": "^10.1.0",
     "tiptap-markdown": "^0.8.10",

package/src/components/MarkdownEditor.tsx

@@ -11,101 +11,103 @@ import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from "react-ic
 // This inplementation is rooted in the Tiptap editor basic example https://codesandbox.io/p/devbox/editor-9x9dkd
 
 interface EditorButtonProps {
-    action: string;
-    isActive?: boolean;
-    label: string | React.ReactNode;
-    disabled?: boolean;
+  action: string;
+  isActive?: boolean;
+  label: string | React.ReactNode;
+  disabled?: boolean;
 }
 
 const EditorButton = ({ action, isActive, label, disabled }: EditorButtonProps) => {
-    const { editor } = useCurrentEditor() as any;
+  const { editor } = useCurrentEditor() as any;
 
-    if (!editor) {
-        return null;
-    }
-
-    if (action.includes("heading")) {
-        const level = parseInt(action[action.length - 1]);
-        return (
-            <button
-                onClick={() => editor.chain().focus().toggleHeading({ level: level }).run()}
-                className={`pl-2 ${isActive ? "is-active" : ""}`}
-            >
-                {label}
-            </button>
-        );
-    }
+  if (!editor) {
+    return null;
+  }
 
+  if (action.includes("heading")) {
+    const level = parseInt(action[action.length - 1]);
     return (
-        <button
-            onClick={() => editor.chain().focus()[action]().run()}
-            disabled={disabled ? !editor.can().chain().focus()[action]().run() : false}
-            className={`pl-2 ${isActive ? "is-active" : ""}`}
-        >
-            {label}
-        </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: level }).run()}
+        className={`pl-2 ${isActive ? "is-active" : ""}`}
+      >
+        {label}
+      </button>
     );
+  }
+
+  return (
+    <button
+      onClick={() => editor.chain().focus()[action]().run()}
+      disabled={disabled ? !editor.can().chain().focus()[action]().run() : false}
+      className={`pl-2 ${isActive ? "is-active" : ""}`}
+    >
+      {label}
+    </button>
+  );
 };
 
 const MenuBar = () => {
-    const { editor } = useCurrentEditor();
+  const { editor } = useCurrentEditor();
 
-    if (!editor) {
-        return null;
-    }
+  if (!editor) {
+    return null;
+  }
 
-    return (
-        <div className="bg-gray-400 dark:bg-gray-800 dark:text-white text-lg flex flex-row flex-wrap items-center p-1">
-            <EditorButton action="toggleBold" isActive={editor.isActive("bold")} label={<FaBold />} disabled />
-            <EditorButton action="toggleItalic" isActive={editor.isActive("italic")} label={<FaItalic />} disabled />
-            <EditorButton action="toggleStrike" isActive={editor.isActive("strike")} label={<FaStrikethrough />} disabled />
-            <EditorButton action="toggleCode" isActive={editor.isActive("code")} label={<FaCode />} disabled />
-            <EditorButton action="setParagraph" isActive={editor.isActive("paragraph")} label={<FaParagraph />} />
-            <EditorButton action='setHeading1' isActive={editor.isActive("heading", { level: 1 })} label={<LuHeading1 size={"24px"} />} />
-            <EditorButton action='setHeading2' isActive={editor.isActive("heading", { level: 2 })} label={<LuHeading2 size={"24px"} />} />
-            <EditorButton action='setHeading3' isActive={editor.isActive("heading", { level: 3 })} label={<LuHeading3 size={"24px"} />} />
-            <EditorButton action="toggleBulletList" isActive={editor.isActive("bulletList")} label={<AiOutlineUnorderedList size={"24px"} />} />
-            <EditorButton action="toggleOrderedList" isActive={editor.isActive("orderedList")} label={<GoListOrdered size={"24px"} />} />
-            <EditorButton action="toggleCodeBlock" isActive={editor.isActive("codeBlock")} label={<PiCodeBlock size={"24px"} />} />
-            <EditorButton action="toggleBlockquote" isActive={editor.isActive("blockquote")} label={<TbBlockquote size={"24px"} />} />
-        </div>
-    );
+  return (
+    <div className="bg-gray-400 dark:bg-gray-800 dark:text-white text-lg flex flex-row flex-wrap items-center p-1">
+      <EditorButton action="toggleBold" isActive={editor.isActive("bold")} label={<FaBold />} disabled />
+      <EditorButton action="toggleItalic" isActive={editor.isActive("italic")} label={<FaItalic />} disabled />
+      <EditorButton action="toggleStrike" isActive={editor.isActive("strike")} label={<FaStrikethrough />} disabled />
+      <EditorButton action="toggleCode" isActive={editor.isActive("code")} label={<FaCode />} disabled />
+      <EditorButton action="setParagraph" isActive={editor.isActive("paragraph")} label={<FaParagraph />} />
+      <EditorButton action='setHeading1' isActive={editor.isActive("heading", { level: 1 })} label={<LuHeading1 size={"24px"} />} />
+      <EditorButton action='setHeading2' isActive={editor.isActive("heading", { level: 2 })} label={<LuHeading2 size={"24px"} />} />
+      <EditorButton action='setHeading3' isActive={editor.isActive("heading", { level: 3 })} label={<LuHeading3 size={"24px"} />} />
+      <EditorButton action="toggleBulletList" isActive={editor.isActive("bulletList")} label={<AiOutlineUnorderedList size={"24px"} />} />
+      <EditorButton action="toggleOrderedList" isActive={editor.isActive("orderedList")} label={<GoListOrdered size={"24px"} />} />
+      <EditorButton action="toggleCodeBlock" isActive={editor.isActive("codeBlock")} label={<PiCodeBlock size={"24px"} />} />
+      <EditorButton action="toggleBlockquote" isActive={editor.isActive("blockquote")} label={<TbBlockquote size={"24px"} />} />
+    </div>
+  );
 };
 
 const extensions = [
-    StarterKit.configure({
-        bulletList: {
-            keepMarks: true,
-            keepAttributes: false,
-        },
-        orderedList: {
-            keepMarks: true,
-            keepAttributes: false,
-        },
-    }),
-    Markdown,
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        className: "list-decimal list-inside dark:text-white p-1 mt-1 [&_li]:mb-1 [&_p]:inline m-0",
+      },
+    },
+  }),
+  Markdown,
 ];
 
 interface Props {
-    content?: string;
-    editable: boolean;
-    className?: string;
-    onUpdate?: (content: string) => void;
+  content?: string;
+  editable: boolean;
+  className?: string;
+  onUpdate?: (content: string) => void;
 }
 
 export const MarkdownEditor = (props: Props) => {
-    return (
-        <div className={"text-md border border-gray-800 overflow-hidden " + props.className} style={{ borderWidth: props.editable ? 1 : 0 }}>
-            <EditorProvider
-                key={(props.editable ? "editable" : "readonly") + props.content}
-                slotBefore={props.editable ? <MenuBar /> : null}
-                extensions={extensions}
-                content={props.content}
-                editable={props.editable}
-                onUpdate={(e) => {
-                    props.onUpdate && props.onUpdate(e.editor.storage.markdown.getMarkdown());
-                }}
-            ></EditorProvider>
-        </div>
-    );
+  return (
+    <div className={"text-md border border-gray-800 overflow-hidden " + props.className} style={{ borderWidth: props.editable ? 1 : 0 }}>
+      <EditorProvider
+        key={(props.editable ? "editable" : "readonly") + props.content}
+        slotBefore={props.editable ? <MenuBar /> : null}
+        extensions={extensions}
+        content={props.content}
+        editable={props.editable}
+        onUpdate={(e) => {
+          props.onUpdate && props.onUpdate(e.editor.storage.markdown.getMarkdown());
+        }}
+      ></EditorProvider>
+    </div>
+  );
 };