@record-evolution/widget-markdown 1.0.1

package/package.json

@@ -0,0 +1,58 @@
+{
+    "name": "@record-evolution/widget-markdown",
+    "description": "Webcomponent widget-markdown following open-wc recommendations",
+    "license": "MIT",
+    "author": "widget-markdown",
+    "version": "1.0.1",
+    "type": "module",
+    "main": "dist/widget-markdown.js",
+    "types": "dist/src/widget-markdown.d.ts",
+    "files": [
+        "dist",
+        "src",
+        "thumbnail.png"
+    ],
+    "scripts": {
+        "analyze": "cem analyze --litelement",
+        "start": "concurrently -k -r \"npm run watch\" \"wds\"",
+        "build": "rollup -c rollup.config.js",
+        "watch": "rollup -w -c rollup.config.js",
+        "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-markdown",
+        "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-markdown && npm i @record-evolution/widget-markdown",
+        "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
+        "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
+    },
+    "dependencies": {
+        "github-markdown-css": "^5.8.1",
+        "highlight.js": "^11.11.1",
+        "lit": "^3.3.1",
+        "marked": "^16.3.0",
+        "marked-highlight": "^2.2.2"
+    },
+    "devDependencies": {
+        "@custom-elements-manifest/analyzer": "^0.10.4",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.3",
+        "@web/dev-server": "^0.4.6",
+        "concurrently": "^9.1.2",
+        "json-schema-to-typescript": "^15.0.4",
+        "rollup-plugin-string": "^3.0.0",
+        "tslib": "^2.8.1",
+        "typescript": "^5.8.3"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/RecordEvolution/widget-markdown.git"
+    },
+    "keywords": [
+        "widget",
+        "textbox"
+    ],
+    "bugs": {
+        "url": "https://github.com/RecordEvolution/widget-markdown/issues"
+    },
+    "homepage": "https://github.com/RecordEvolution/widget-markdown#readme"
+}

package/src/default-data.json

@@ -0,0 +1,3 @@
+{
+    "markdown": "# Markdown Showcase\n\n## Text formatting\nNormal, **bold**, *italic*, ~~strikethrough~~, and `inline code`.\n\n> A blockquote with some *emphasis* and **bold**.\n\n---\n\n## Links & Images\n\n![Placeholder image](https://res.cloudinary.com/dk8bhmsdz/image/upload/c_pad,w_500/v1747230890/samples/imagecon-group.jpg)\n\n[Google](https://google.com)\n\n## Lists\n\n- Unordered item\n  - Nested item\n- Another item\n\n1. Ordered list\n2. Second item\n   1. Nested ordered\n   2. Another\n\n---\n\n---\n\n## Code blocks\n\n```python\ndef greet(name):\n    print(f\"Hello, {name}!\")\n\ngreet(\"Markdown\")\n```\n\n---\n\n## Tables\n\n| Name     | Age | Role        |\n|:---------|:---:|-------------:|\n| Alice    |  25 | Developer   |\n| Bob      |  30 | Designer    |\n| Charlie  |  28 | Product Mgr |\n\n---\n\n## Task lists\n\n- [x] Write Markdown\n- [ ] Preview it\n- [ ] Share it\n\n---\n\n## \n"
+}

package/src/definition-schema.d.ts

@@ -0,0 +1,27 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type FontSize = string;
+export type FontWeight = number;
+
+export interface TextboxConfiguration {
+  markdown?: Markdown;
+  fontSize?: FontSize;
+  fontWeight?: FontWeight;
+  color?: FontColor;
+  backgroundColor?: BackgroundColor;
+  [k: string]: unknown;
+}
+export interface Markdown {
+  [k: string]: unknown;
+}
+export interface FontColor {
+  [k: string]: unknown;
+}
+export interface BackgroundColor {
+  [k: string]: unknown;
+}

package/src/definition-schema.json

@@ -0,0 +1,35 @@
+{
+    "title": "Textbox Configuration",
+    "type": "object",
+    "properties": {
+        "markdown": {
+            "title": "Markdown",
+            "order": 1,
+            "type": "textarea"
+        },
+        "fontSize": {
+            "title": "Font Size",
+            "order": 2,
+            "dataDrivenDisabled": true,
+            "type": "string"
+        },
+        "fontWeight": {
+            "title": "Font Weight",
+            "order": 3,
+            "dataDrivenDisabled": true,
+            "type": "number"
+        },
+        "color": {
+            "title": "Font Color",
+            "order": 4,
+            "type": "color",
+            "color": true
+        },
+        "backgroundColor": {
+            "title": "Background Color",
+            "order": 5,
+            "type": "color",
+            "color": true
+        }
+    }
+}

package/src/widget-markdown.ts

@@ -0,0 +1,163 @@
+import { html, css, LitElement, PropertyValues } from 'lit'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { unsafeCSS } from 'lit'
+import { Marked } from 'marked'
+import { markedHighlight } from 'marked-highlight'
+
+import hljs from 'highlight.js/lib/core'
+import shell from 'highlight.js/lib/languages/shell'
+import python from 'highlight.js/lib/languages/python'
+import javascript from 'highlight.js/lib/languages/javascript'
+import plaintext from 'highlight.js/lib/languages/plaintext'
+import typescript from 'highlight.js/lib/languages/typescript'
+import json from 'highlight.js/lib/languages/json'
+import cssLang from 'highlight.js/lib/languages/css'
+// @ts-ignore - virtual import returns a string at build time
+import highlightCSS from 'highlight.js/styles/github.css'
+// GitHub Markdown CSS imported as string via rollup-plugin-string
+// The user requested: import md from 'github-markdown-css'
+// We'll honor that path (package provides github-markdown.css entry)
+// @ts-ignore - virtual import returns a string at build time
+import githubCss from 'github-markdown-css/github-markdown.css'
+import { customElement, property, state } from 'lit/decorators.js'
+import { TextboxConfiguration } from './definition-schema.js'
+
+hljs.registerLanguage('shell', shell)
+hljs.registerLanguage('bash', shell)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('js', javascript)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('ts', typescript)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('css', cssLang)
+hljs.registerLanguage('plaintext', plaintext)
+
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
+
+@customElement('widget-markdown-versionplaceholder')
+export class WidgetMarkdown extends LitElement {
+    @property({ type: Object })
+    inputData?: TextboxConfiguration
+
+    @property({ type: Object })
+    theme?: Theme
+
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+    @state() private themeSubtitleColor?: string
+
+    version: string = 'versionplaceholder'
+    marked: Marked
+
+    constructor() {
+        super()
+        this.marked = new Marked(
+            markedHighlight({
+                emptyLangClass: 'hljs',
+                langPrefix: 'hljs language-',
+                highlight(code, lang, info) {
+                    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
+                    return hljs.highlight(code, { language }).value
+                }
+            })
+        )
+    }
+
+    update(changedProperties: Map<string, any>) {
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme)
+        }
+
+        super.update(changedProperties)
+        // if (changedProperties.has('inputData') && this.inputData) {
+        //     if (this.shadowRoot) {
+        //         for (const codeBlock of Array.from(this.shadowRoot.querySelectorAll('pre code'))) {
+        //             hljs.highlightBlock(codeBlock as HTMLElement)
+        //         }
+        //     }
+        // }
+    }
+
+    protected firstUpdated(_changedProperties: PropertyValues): void {
+        this.registerTheme(this.theme)
+    }
+
+    registerTheme(theme?: Theme) {
+        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
+        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
+        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
+        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
+        this.themeSubtitleColor =
+            cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
+    }
+
+    static styles = [
+        unsafeCSS(githubCss),
+        unsafeCSS(highlightCSS),
+        css`
+            :host {
+                display: block;
+                font-family: sans-serif;
+                box-sizing: border-box;
+                margin: auto;
+            }
+
+            .paging:not([active]) {
+                display: none !important;
+            }
+
+            .wrapper {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                padding: 12px;
+                box-sizing: border-box;
+            }
+
+            h2 {
+                margin: 0;
+                padding: 0px;
+            }
+
+            h3 {
+                margin: 0;
+                padding: 12px 0px;
+            }
+
+            .markdown-body {
+                background: transparent;
+                color: inherit;
+                font-family: inherit;
+                width: 100%;
+                padding: 12px;
+                box-sizing: border-box;
+            }
+
+            .markdown-body table tr {
+                background-color: transparent !important;
+            }
+        `
+    ]
+
+    render() {
+        const mdText: string = String(this.inputData?.markdown ?? '')
+        const mdHtml: string = this.marked.parse(mdText) as string
+        return html`
+            <div class="wrapper" style="background-color: ${this.themeBgColor}">
+                <div
+                    class="paging markdown-body"
+                    ?active=${this.inputData?.markdown}
+                    style="font-size: ${this.inputData?.fontSize}; 
+                        font-weight: ${this.inputData?.fontWeight};
+                        color: ${this.inputData?.color || this.themeTitleColor};"
+                >
+                    ${unsafeHTML(mdHtml)}
+                </div>
+            </div>
+        `
+    }
+}