@rimori/client 1.0.0

package/dist/utils/plugin/RimoriClient.d.ts

@@ -0,0 +1,72 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+import { GenericSchema } from "@supabase/supabase-js/dist/module/lib/types";
+import { PostgrestQueryBuilder, PostgrestFilterBuilder } from "@supabase/postgrest-js";
+import { PluginController, Tool, ToolInvocation } from "./PluginController";
+import { LanguageLevel } from "../DifficultyConverter";
+export declare class RimoriClient {
+    private static instance;
+    private superbase;
+    private plugin;
+    functions: SupabaseClient["functions"];
+    storage: SupabaseClient["storage"];
+    private constructor();
+    static getInstance(pluginController: PluginController): Promise<RimoriClient>;
+    from<TableName extends string & keyof GenericSchema['Tables'], Table extends GenericSchema['Tables'][TableName]>(relation: TableName): PostgrestQueryBuilder<GenericSchema, Table, GenericSchema, Table extends {
+        Relationships: infer R;
+    } ? R : unknown>;
+    /**
+    * Perform a function call.
+    *
+    * @param fn - The function name to call
+    * @param args - The arguments to pass to the function call
+    * @param options - Named parameters
+    * @param options.head - When set to `true`, `data` will not be returned.
+    * Useful if you only need the count.
+    * @param options.get - When set to `true`, the function will be called with
+    * read-only access mode.
+    * @param options.count - Count algorithm to use to count rows returned by the
+    * function. Only applicable for [set-returning
+    * functions](https://www.postgresql.org/docs/current/functions-srf.html).
+    *
+    * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
+    * hood.
+    *
+    * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
+    * statistics under the hood.
+    *
+    * `"estimated"`: Uses exact count for low numbers and planned count for high
+    * numbers.
+    */
+    rpc<FnName extends string & keyof GenericSchema['Functions'], Fn extends GenericSchema['Functions'][FnName]>(fn: FnName, args?: Fn['Args'], options?: {
+        head?: boolean;
+        get?: boolean;
+        count?: 'exact' | 'planned' | 'estimated';
+    }): PostgrestFilterBuilder<GenericSchema, Fn['Returns'] extends any[] ? Fn['Returns'][number] extends Record<string, unknown> ? Fn['Returns'][number] : never : never, Fn['Returns'], FnName, null>;
+    subscribe(eventName: string, callback: (_id: number, data: any) => void): void;
+    request<T>(eventName: string, data: any): Promise<T>;
+    emit(eventName: string, data: any): void;
+    /**
+    * Get the settings for the plugin. T can be any type of settings, UserSettings or SystemSettings.
+    * @param defaultSettings The default settings to use if no settings are found.
+    * @param genericSettings The type of settings to get.
+    * @returns The settings for the plugin.
+    */
+    getSettings<T>(defaultSettings: T, genericSettings?: "user" | "system"): Promise<T>;
+    setSettings(settings: any, genericSettings?: "user" | "system"): Promise<void>;
+    getAIResponse(messages: {
+        role: string;
+        content: string;
+    }[]): Promise<string>;
+    getAIResponseStream(messages: {
+        role: string;
+        content: string;
+    }[], onMessage: (id: string, message: string, finished: boolean, toolInvocations?: ToolInvocation[]) => void, tools?: Tool[]): Promise<void>;
+    getVoiceResponse(text: string, voice?: string, speed?: number, language?: string): Promise<Blob>;
+    getVoiceToTextResponse(file: Blob): Promise<string>;
+}
+export interface UserSettings {
+    motherTongue: string;
+    languageLevel: LanguageLevel;
+}
+export interface SystemSettings {
+}

package/dist/utils/plugin/RimoriClient.js

@@ -0,0 +1,118 @@
+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());
+    });
+};
+export class RimoriClient {
+    constructor(pluginController, superbase) {
+        this.superbase = superbase;
+        this.plugin = pluginController;
+        this.functions = this.superbase.functions;
+        this.storage = this.superbase.storage;
+    }
+    static getInstance(pluginController) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!RimoriClient.instance) {
+                const superbase = yield pluginController.getClient();
+                RimoriClient.instance = new RimoriClient(pluginController, superbase);
+            }
+            return RimoriClient.instance;
+        });
+    }
+    from(relation) {
+        return this.superbase.from(relation);
+    }
+    /**
+    * Perform a function call.
+    *
+    * @param fn - The function name to call
+    * @param args - The arguments to pass to the function call
+    * @param options - Named parameters
+    * @param options.head - When set to `true`, `data` will not be returned.
+    * Useful if you only need the count.
+    * @param options.get - When set to `true`, the function will be called with
+    * read-only access mode.
+    * @param options.count - Count algorithm to use to count rows returned by the
+    * function. Only applicable for [set-returning
+    * functions](https://www.postgresql.org/docs/current/functions-srf.html).
+    *
+    * `"exact"`: Exact but slow count algorithm. Performs a `COUNT(*)` under the
+    * hood.
+    *
+    * `"planned"`: Approximated but fast count algorithm. Uses the Postgres
+    * statistics under the hood.
+    *
+    * `"estimated"`: Uses exact count for low numbers and planned count for high
+    * numbers.
+    */
+    rpc(fn, args = {}, options = {}) {
+        return this.superbase.rpc(fn, args, options);
+    }
+    subscribe(eventName, callback) {
+        this.plugin.subscribe(eventName, callback);
+    }
+    request(eventName, data) {
+        return this.plugin.request(eventName, data);
+    }
+    emit(eventName, data) {
+        this.plugin.emit(eventName, data);
+    }
+    /**
+    * Get the settings for the plugin. T can be any type of settings, UserSettings or SystemSettings.
+    * @param defaultSettings The default settings to use if no settings are found.
+    * @param genericSettings The type of settings to get.
+    * @returns The settings for the plugin.
+    */
+    getSettings(defaultSettings, genericSettings) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.plugin.request("get_settings", { genericSettings });
+            if (response === null) {
+                this.setSettings(defaultSettings, genericSettings);
+                return defaultSettings;
+                //if the settings are not the same, merge the settings
+            }
+            else if (Object.keys(response).length !== Object.keys(defaultSettings).length) {
+                const existingKeys = Object.fromEntries(Object.entries(response).filter(([k]) => k in defaultSettings));
+                const mergedSettings = Object.assign(Object.assign({}, defaultSettings), existingKeys);
+                console.warn("Settings mismatch", { response, defaultSettings, mergedSettings });
+                this.setSettings(mergedSettings, genericSettings);
+                return mergedSettings;
+            }
+            return response;
+        });
+    }
+    setSettings(settings, genericSettings) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.plugin.request("set_settings", { settings, genericSettings });
+        });
+    }
+    getAIResponse(messages) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.plugin.request("getAIResponse", messages);
+        });
+    }
+    getAIResponseStream(messages, onMessage, tools) {
+        return __awaiter(this, void 0, void 0, function* () {
+            throw new Error("Not implemented");
+            // let triggered = false;
+            // console.log("getAIResponseStream", messages);
+            // const id = Math.random();
+            // this.internalEmit("getAIResponseStream", id, { messages, tools: tools || [] });
+            // this.subscribe("getAIResponseStream", (_id: number, data: { id: string, response: string, finished: boolean, toolInvocations?: ToolInvocation[] }) => {
+            //     if (triggered || (_id !== id && _id !== 0)) return;
+            //     triggered = data.finished;
+            //     onMessage(data.id, data.response, data.finished, data.toolInvocations);
+            // })
+        });
+    }
+    getVoiceResponse(text, voice = "alloy", speed = 1, language) {
+        return this.plugin.request("getVoiceResponse", { text, voice, speed, language });
+    }
+    getVoiceToTextResponse(file) {
+        return this.plugin.request("getSTTResponse", file);
+    }
+}

package/dist/utils/plugin/ThemeSetter.d.ts

@@ -0,0 +1 @@
+export declare function setTheme(): void;

package/dist/utils/plugin/ThemeSetter.js

@@ -0,0 +1,13 @@
+export function setTheme() {
+    const urlParams = new URLSearchParams(window.location.search);
+    let theme = urlParams.get('theme');
+    const isSidebar = urlParams.get('applicationMode') === "sidebar";
+    if (!theme || theme === 'system') {
+        theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    document.documentElement.classList.add("dark:text-gray-200", "bg-white");
+    if (theme === 'dark') {
+        document.documentElement.classList.add('dark', isSidebar ? "bg-gray-920" : "bg-gray-950");
+        document.documentElement.style.background = isSidebar ? "rgb(6, 12, 30)" : "rgb(3, 7, 18)";
+    }
+}

package/dist/utils/plugin/WhereClauseBuilder.d.ts

@@ -0,0 +1,24 @@
+type Condition = {
+    column?: string;
+    operator?: string;
+    value?: any;
+    AND?: Condition[];
+    OR?: Condition[];
+};
+export declare class WhereClauseBuilder {
+    conditions: Condition[];
+    constructor();
+    eq(column: string, value: any): WhereClauseBuilder;
+    neq(column: string, value: any): WhereClauseBuilder;
+    gt(column: string, value: any): WhereClauseBuilder;
+    lt(column: string, value: any): WhereClauseBuilder;
+    gte(column: string, value: any): WhereClauseBuilder;
+    lte(column: string, value: any): WhereClauseBuilder;
+    like(column: string, pattern: string): WhereClauseBuilder;
+    in(column: string, values: any[]): WhereClauseBuilder;
+    isNull(column: string): WhereClauseBuilder;
+    isNotNull(column: string): WhereClauseBuilder;
+    between(column: string, start: any, end: any): WhereClauseBuilder;
+    build(): Condition;
+}
+export {};

package/dist/utils/plugin/WhereClauseBuilder.js

@@ -0,0 +1,79 @@
+export class WhereClauseBuilder {
+    constructor() {
+        this.conditions = [];
+    }
+    // Add AND condition
+    // and(): WhereClauseBuilder {
+    //     const builder = new WhereClauseBuilder();
+    //     this.conditions.push({ AND: builder.conditions });
+    //     return builder;
+    // }
+    // Add OR condition
+    // or(): WhereClauseBuilder {
+    //     const builder = new WhereClauseBuilder();
+    //     this.conditions.push({ OR: builder.conditions });
+    //     return builder;
+    // }
+    // Equality check
+    eq(column, value) {
+        this.conditions.push({ column, operator: "eq", value });
+        return this;
+    }
+    // Not equal check
+    neq(column, value) {
+        this.conditions.push({ column, operator: "neq", value });
+        return this;
+    }
+    // Greater than
+    gt(column, value) {
+        this.conditions.push({ column, operator: "gt", value });
+        return this;
+    }
+    // Less than
+    lt(column, value) {
+        this.conditions.push({ column, operator: "lt", value });
+        return this;
+    }
+    // Greater than or equal to
+    gte(column, value) {
+        this.conditions.push({ column, operator: "gte", value });
+        return this;
+    }
+    // Less than or equal to
+    lte(column, value) {
+        this.conditions.push({ column, operator: "lte", value });
+        return this;
+    }
+    // LIKE (pattern match)
+    like(column, pattern) {
+        this.conditions.push({ column, operator: "like", value: pattern });
+        return this;
+    }
+    // IN (for multiple values)
+    in(column, values) {
+        this.conditions.push({ column, operator: "in", value: values });
+        return this;
+    }
+    // IS NULL
+    isNull(column) {
+        this.conditions.push({ column, operator: "is", value: null });
+        return this;
+    }
+    // IS NOT NULL
+    isNotNull(column) {
+        this.conditions.push({ column, operator: "is", value: { not: null } });
+        return this;
+    }
+    // BETWEEN (for range checking)
+    between(column, start, end) {
+        this.conditions.push({ column, operator: "between", value: [start, end] });
+        return this;
+    }
+    // Build and return the final condition object
+    build() {
+        // if (this.conditions.length === 1) {
+        //     return this.conditions; // Direct return if only one condition
+        // }
+        return { AND: this.conditions }; // If multiple conditions, combine using AND
+    }
+}

package/dist/utils/plugin/providers/EventEmitter.d.ts

@@ -0,0 +1,11 @@
+type Listener<T = any> = (event: T) => void;
+export declare class EventEmitter {
+    private events;
+    constructor();
+    on<T = any>(eventName: string, listener: Listener<T>): void;
+    once<T = any>(eventName: string, listener: Listener<T>): void;
+    removeListener<T = any>(eventName: string, listener: Listener<T>): void;
+    emit<T = any>(eventName: string, data?: T): void;
+}
+export declare const EmitterSingleton: EventEmitter;
+export {};

package/dist/utils/plugin/providers/EventEmitter.js

@@ -0,0 +1,41 @@
+export class EventEmitter {
+    constructor() {
+        this.events = new Map();
+        this.on = this.on.bind(this);
+        this.once = this.once.bind(this);
+        this.emit = this.emit.bind(this);
+        this.removeListener = this.removeListener.bind(this);
+    }
+    // Subscribe to an event
+    on(eventName, listener) {
+        if (!this.events.has(eventName)) {
+            this.events.set(eventName, []);
+        }
+        this.events.get(eventName).push(listener);
+    }
+    // Subscribe to an event for a single invocation
+    once(eventName, listener) {
+        const onceWrapper = (event) => {
+            this.removeListener(eventName, onceWrapper);
+            listener(event);
+        };
+        this.on(eventName, onceWrapper);
+    }
+    // Remove a specific listener
+    removeListener(eventName, listener) {
+        const listeners = this.events.get(eventName);
+        if (!listeners)
+            return;
+        this.events.set(eventName, listeners.filter((l) => l !== listener));
+    }
+    // Emit an event
+    emit(eventName, data) {
+        const listeners = this.events.get(eventName);
+        console.log("emit", eventName, data, listeners);
+        if (!listeners)
+            return;
+        listeners.forEach((listener) => listener(data));
+    }
+}
+const emitter = new EventEmitter();
+export const EmitterSingleton = emitter;

package/dist/utils/plugin/providers/EventEmitterContext.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { EventEmitter } from "./EventEmitter";
+export declare const EventEmitterProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useEventEmitter: () => EventEmitter;

package/dist/utils/plugin/providers/EventEmitterContext.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef } from "react";
+import { EmitterSingleton } from "./EventEmitter";
+// Create the Context
+const EventEmitterContext = createContext(null);
+// Provider Component
+export const EventEmitterProvider = ({ children }) => {
+    const eventEmitterRef = useRef(EmitterSingleton);
+    return (_jsx(EventEmitterContext.Provider, { value: eventEmitterRef.current, children: children }));
+};
+// Hook to use the EventEmitter
+export const useEventEmitter = () => {
+    const context = useContext(EventEmitterContext);
+    if (!context) {
+        throw new Error("useEventEmitter must be used within an EventEmitterProvider");
+    }
+    return context;
+};

package/dist/utils/plugin/providers/PluginProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { RimoriClient } from '../RimoriClient';
+interface PluginProviderProps {
+    children: ReactNode;
+}
+export declare const PluginProvider: React.FC<PluginProviderProps>;
+export declare const usePlugin: () => RimoriClient;
+export {};

package/dist/utils/plugin/providers/PluginProvider.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import { PluginController } from '../PluginController';
+const PluginContext = createContext(null);
+export const PluginProvider = ({ children }) => {
+    const [plugin, setPlugin] = useState(null);
+    //route change
+    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.emit('urlChange', window.location.hash);
+            }
+        }, 100);
+        PluginController.getInstance().then(setPlugin);
+    }, []);
+    //context menu
+    useEffect(() => {
+        let isOpen = false;
+        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', selection);
+                plugin === null || plugin === void 0 ? void 0 : plugin.emit('contextMenu', { text: selection, x: e.clientX, y: e.clientY, open: true });
+                isOpen = true;
+            }
+        };
+        // Hide the menu on click outside
+        const handleClick = () => isOpen && (plugin === null || plugin === void 0 ? void 0 : plugin.emit('contextMenu', { text: '', x: 0, y: 0, open: false }));
+        document.addEventListener("click", handleClick);
+        document.addEventListener('contextmenu', handleContextMenu);
+        return () => {
+            document.removeEventListener("click", handleClick);
+            document.removeEventListener('contextmenu', handleContextMenu);
+        };
+    }, [plugin]);
+    return (_jsx(PluginContext.Provider, { value: plugin, children: children }));
+};
+export const usePlugin = () => {
+    const context = useContext(PluginContext);
+    if (context === null) {
+        throw new Error('usePlugin must be used within an PluginProvider');
+    }
+    return context;
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@rimori/client",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc && sass src/style.scss:dist/style.css",
+    "dev": "tsc -w",
+    "css-dev": "sass --watch src/style.scss:dist/style.css"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "@supabase/supabase-js": "^2.48.1",
+    "@tiptap/react": "2.10.3",
+    "@tiptap/starter-kit": "2.10.3",
+    "ibridge-flex": "0.0.1",
+    "uuid": "11.1.0",
+    "react-icons": "^5.4.0",
+    "tiptap-markdown": "^0.8.10",
+    "typescript": "^5.7.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.1",
+    "sass": "^1.82.0"
+  }
+}

package/src/components/CRUDModal.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+
+interface Props {
+    title: string;
+    show?: boolean;
+    className?: string;
+    closeAble?: boolean;
+    children: React.ReactNode;
+    actionbuttons: ActionButton[];
+    buttonText?: string | React.ReactNode;
+    onClose?: () => void;
+}
+
+interface ActionButton {
+    text: string;
+    onClick: () => void;
+    closeModal?: boolean;
+}
+
+export function CRUDModal({ actionbuttons, children, title, buttonText, className, closeAble = true, show = false, onClose }: Props) {
+    const dialogRef = useRef<HTMLDialogElement>(null);
+
+    useEffect(() => {
+        if (show) {
+            dialogRef.current?.showModal();
+        } else {
+            dialogRef.current?.close();
+        }
+    }, [show]);
+
+    const handleClose = () => {
+        dialogRef.current?.close();
+        onClose?.();
+    };
+
+    return (
+        <>
+            {!!buttonText && <button className={className} onClick={() => dialogRef.current?.showModal()}>{buttonText}</button>}
+            <dialog ref={dialogRef} className="bg-gray-400 rounded-lg font-normal" onClose={handleClose}>
+                <div className="bg-gray-500 text-xl flex flex-row justify-between p-3 items-start font-bold">
+                    <h2>{title}</h2>
+                    {closeAble && <button onClick={handleClose}>&times;</button>}
+                </div>
+                <div className="modal-body p-2">
+                    {children}
+                </div>
+                <div className="modal-footer px-2 py-2 flex flex-row gap-2 border-t-2">
+                    {actionbuttons.map(({ onClick, text, closeModal = true }, index) => (
+                        <button key={index} className="bg-blue-500 hover:bg-blue-600 dark:border-gray-900 rounded-md py-2 px-4 dark:text-white font-bold"
+                            onClick={() => {
+                                if (closeModal) handleClose();
+                                onClick();
+                            }}>{text}</button>
+                    ))}
+                </div>
+            </dialog>
+        </>
+    );
+}

package/src/components/MarkdownEditor.tsx

@@ -0,0 +1,111 @@
+import { Markdown } from 'tiptap-markdown';
+import StarterKit from "@tiptap/starter-kit";
+import { PiCodeBlock } from "react-icons/pi";
+import { TbBlockquote } from "react-icons/tb";
+import { GoListOrdered } from "react-icons/go";
+import { AiOutlineUnorderedList } from "react-icons/ai";
+import { EditorProvider, useCurrentEditor } from "@tiptap/react";
+import { LuHeading1, LuHeading2, LuHeading3 } from "react-icons/lu";
+import { FaBold, FaCode, FaItalic, FaParagraph, FaStrikethrough } from "react-icons/fa";
+
+// 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;
+}
+
+const EditorButton = ({ action, isActive, label, disabled }: EditorButtonProps) => {
+    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>
+        );
+    }
+
+    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();
+
+    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>
+    );
+};
+
+const extensions = [
+    StarterKit.configure({
+        bulletList: {
+            keepMarks: true,
+            keepAttributes: false,
+        },
+        orderedList: {
+            keepMarks: true,
+            keepAttributes: false,
+        },
+    }),
+    Markdown,
+];
+
+interface Props {
+    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>
+    );
+};