@operato/markdown 8.0.0-beta.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/markdown

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/markdown",
   "description": "Webcomponent markdown following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -41,7 +41,7 @@
     "storybook:build": "tsc && npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@operato/styles": "^8.0.0-beta.0",
+    "@operato/styles": "^8.0.0-beta.2",
     "lit": "^3.1.2",
     "marked": "^4.0.7"
   },
@@ -78,5 +78,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html

@@ -1,45 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-        --ox-checkbox-size: 12px;
-      }
-
-      #demo {
-        position: relative;
-        height: 300px;
-        background-color: lightgray;
-        vertical-align: middle;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/ox-markdown.js'
-      import '@material/web/icon/icon.js'
-
-      const parent = document.querySelector('#demo')
-
-      render(html`clike anywhere in this box to show markdown.`, parent)
-    </script>
-  </body>
-</html>

package/src/index.ts

@@ -1 +0,0 @@
-export * from './ox-markdown'

package/src/markdown-style.ts

@@ -1,121 +0,0 @@
-import { css } from 'lit'
-
-export const MarkdownStyle = css`
-  h1 {
-    margin: var(--help-panel-title-margin);
-    padding: var(--help-panel-title-padding);
-    font-size: 20px;
-    text-transform: capitalize;
-    color: var(--help-panel-h1-title-color);
-  }
-  h2 {
-    margin: var(--help-panel-title-margin);
-    padding: var(--help-panel-title-padding);
-    font-size: 18px;
-    color: var(--help-panel-h2-title-color);
-    text-transform: capitalize;
-  }
-  h3 {
-    margin: var(--help-panel-title-margin);
-    padding: var(--help-panel-title-padding);
-    font-size: 16px;
-    color: var(--help-panel-h3-title-color);
-  }
-  md-icon {
-    vertical-align: middle;
-  }
-
-  img {
-    display: block;
-    margin: var(--spacing-large) var(--spacing-large);
-    max-width: 90%;
-  }
-  img[src*='#icon25'] {
-    width: 25px;
-    height: 25px;
-  }
-  img[src*='#icon50'] {
-    width: 50px;
-    height: 50px;
-  }
-  img[src*='#icon100'] {
-    width: 100px;
-    height: 100px;
-  }
-  img[src*='#icon25inlined'],
-  img[src*='#icon50inlined'],
-  img[src*='#icon100inlined'] {
-    display: inline-block;
-    margin: var(--spacing-small);
-  }
-  p {
-    margin: var(--help-panel-paragraph-margin);
-    font-size: var(--help-panel-font-size);
-  }
-  [focusBox] {
-    display: block;
-    padding: var(--help-panel-focusBox-padding);
-    border: var(--help-panel-focusBox-border);
-    border-radius: var(--help-panel-focusBox-border-radius);
-    background-color: var(--help-panel-focusBox-background-color);
-    color: var(--help-panel-focusBox-color);
-  }
-
-  [subtitle] {
-    font-weight: bold;
-  }
-  [subtitle]::before {
-    content: '';
-    width: 7px;
-    height: 7px;
-    display: inline-block;
-    border: 3px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    margin-right: var(--spacing-small);
-  }
-  p + ol,
-  p + ul {
-    font-size: var(--help-panel-content-font-size);
-  }
-  ol,
-  ul {
-    padding: 0 0 0 30px;
-  }
-  ol li,
-  ul li {
-    margin: 0 0 2px 0;
-  }
-  a {
-    margin-bottom: 0 !important;
-    color: var(--help-panel-a-color);
-    font-size: var(--fontsize-default);
-    text-decoration: underline;
-  }
-  a md-icon {
-    font-size: var(--help-panel-a-icon-size);
-    margin: 0;
-  }
-  a:hover {
-    background-color: var(--opacity-light-dark-color);
-    font-weight: bold;
-  }
-
-  table {
-    border-collapse: collapse;
-    border: var(--border-dim-color);
-    font-size: 0.9em;
-  }
-  th {
-    border-top: 3px solid var(--md-sys-color-on-primary-container);
-    background-color: var(--md-sys-color-background);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-  th,
-  td {
-    border-bottom: var(--border-dim-color);
-    padding: var(--spacing-small);
-  }
-  tr:nth-child(even) {
-    background-color: #f6f6f6;
-  }
-`

package/src/markdown.ts

@@ -1,21 +0,0 @@
-const worker = new Worker(new URL('../../workers/markdown-webworker.js', import.meta.url), { type: 'module' })
-
-const TIMEOUT_LIMIT = 20000
-
-export async function md(markdown: string, options: StructuredSerializeOptions): Promise<any> {
-  return new Promise((resolve, reject) => {
-    var timeout = setTimeout(() => {
-      reject('Marked took too long!')
-    }, TIMEOUT_LIMIT)
-
-    worker.onmessage = e => {
-      clearTimeout(timeout)
-      resolve(e.data)
-    }
-
-    worker.postMessage({
-      content: markdown,
-      options
-    })
-  })
-}

package/src/ox-markdown.ts

@@ -1,116 +0,0 @@
-import { LitElement, PropertyValues, TemplateResult, css, html } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { DirectiveResult } from 'lit-html/directive'
-import { MarkdownStyle } from './markdown-style'
-import { ScrollbarStyles } from '@operato/styles'
-import { md } from './markdown'
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'
-
-@customElement('ox-markdown')
-export class OxMarkdown extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    MarkdownStyle,
-    css`
-      #toc {
-        position: absolute;
-        max-width: 250px;
-        background-color: var(--md-sys-color-surface);
-        padding: var(--padding-default);
-        right: var(--spacing-large);
-        font: bold var(--fontsize-large) var(--theme-font);
-        color: var(--md-sys-color-on-secondary-container);
-      }
-      #toc ul {
-        list-style: circle;
-        margin: var(--margin-default) 0 0 var(--spacing-large);
-        padding: 0;
-      }
-      #toc a {
-        display: inline-block;
-        margin-left: -var(--spacing-small);
-        padding: var(--spacing-small) 0;
-        font: normal var(--fontsize-default) var(--theme-font);
-        color: var(--md-sys-color-on-secondary-container);
-        text-decoration: none;
-        cursor: pointer;
-      }
-      #toc a:hover {
-        background-color: var(--md-sys-color-surface);
-        text-decoration: underline;
-        color: var(--md-sys-color-on-primary-container);
-      }
-
-      @media screen and (max-width: 460px) {
-        #toc {
-          background-color: var(--md-sys-color-background);
-          border-left: 4px solid var(--md-sys-color-on-primary-container);
-          border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
-          position: relative;
-          width: 100%;
-          max-width: initial;
-          padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--spacing-large);
-        }
-      }
-    `
-  ]
-
-  @property({ type: String }) src?: string
-  @property({ type: Boolean }) toc: boolean = false
-
-  @state() _html?: TemplateResult | DirectiveResult | null
-  @state() _headings: any[] = []
-
-  render() {
-    return html` ${this.toc ? this.renderToc() : html``} ${this._html} `
-  }
-
-  renderToc() {
-    var toc = this._headings || []
-
-    return toc && toc.length > 0
-      ? html`
-          <div id="toc">
-            Table Of Contents
-            <ul>
-              ${toc.map(
-                heading => html` <li><a @click=${() => heading?.scrollIntoView()}>${heading.textContent}</a></li> `
-              )}
-            </ul>
-          </div>
-        `
-      : html``
-  }
-
-  async updated(changed: PropertyValues<this>) {
-    if (changed.has('src')) {
-      if (this.src) {
-        const response = await fetch(this.src)
-        const content = await response.text()
-
-        if (!response.ok) {
-          this._html = html`
-            <h1>Error : ${response.status}</h1>
-            <div>${content}</div>
-          `
-        } else {
-          if (response.headers.get('Content-Type')?.indexOf('text/markdown') !== -1) {
-            this._html = unsafeHTML(
-              (await md(content, {
-                baseUrl: this.src,
-                linkBaseUrl: document.baseURI
-              } as StructuredSerializeOptions)) || ''
-            )
-          } else {
-            this._html = unsafeHTML(content || '')
-          }
-        }
-      }
-    }
-
-    if (changed.has('_html')) {
-      this._headings = Array.from(this.renderRoot.querySelectorAll('h2'))
-    }
-  }
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});