feat: base functional

.github/workflows/autofix.yml

@@ -0,0 +1,34 @@
+name: autofix.ci
+
+on:
+  push:
+    branches:
+      - master
+
+  pull_request:
+    branches:
+      - master
+
+  merge_group: {}
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install
+        run: pnpm i
+
+      - name: Lint
+        run: pnpm lint --fix
+
+      - uses: autofix-ci/[email protected]

.github/workflows/deploy-doc.yml

@@ -0,0 +1,37 @@
+name: GitHub Pages
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch: {}
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install deps
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: ./docs

.github/workflows/release.yml

@@ -0,0 +1,27 @@
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set node
+        uses: actions/setup-node@v4
+        with:
+          registry-url: https://registry.npmjs.org/
+          node-version: lts/*
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+/docs/**/*
+
+!/docs/index.js
+!/docs/index.html
+.eslintcache

.vscode/settings.json

@@ -0,0 +1,43 @@
+{
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "prettier.enable": false,
+  "eslint.enable": true,
+  "eslint.runtime": "node",
+  "eslint.format.enable": true,
+  "eslint.useFlatConfig": true,
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "json5",
+    "jsonc",
+    "yaml",
+    "xml",
+    "css",
+    "less",
+    "scss",
+    "postcss"
+  ]
+}

README.md

@@ -0,0 +1,14 @@
+# quill-header-list
+
+## options
+
+| name            | type                     | description                                                                                                                            | default     | required |
+| --------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------- |
+| container       | `string \| HTMLElement`  | the list container. string must be the element id                                                                                      | -           | `true`   |
+| scrollContainer | `string \| HTMLElement`  | editor scroll container. default is `quill.root`                                                                                       | -           | `false`  |
+| hideClass       | `number`                 | the class name when list hidden                                                                                                        | `is-hidden` | `false`  |
+| topOffset       | `number \| () => number` | the offset from the top                                                                                                                | `0`         | `false`  |
+| headerHeight    | `number`                 | the header height in editor. this is for calculate header scroll highligh. don't make the height difference between h1 and h6 too much | `36`        | `false`  |
+| onBeforeShow    | `() => boolean`          | trigger before display. return `true` will cancel display                                                                              | -           | `false`  |
+| onBeforeHide    | `() => boolean`          | trigger before hidden. return `true` will cancel hidden                                                                                | -           | `false`  |
+| onItemClick     | `(id: string) => void`   | trigger when click list item. id is the header element id                                                                              | -           | `false`  |

docs/index.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
+      integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+"
+      crossorigin="anonymous"
+    />
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
+      integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg"
+      crossorigin="anonymous"
+    ></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.bubble.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
+    <link rel="stylesheet" href="./index.css" />
+    <script src="./dev.js"></script>
+    <style>
+      .main {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        max-width: 1200px;
+        margin: auto;
+      }
+      .directory {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        z-index: 1;
+        transform: translateX(100%);
+        width: 300px;
+        background-color: #fff;
+        box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
+      }
+      .directory#directory2 {
+        position: fixed;
+        transform: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main">
+      <div>
+        <button id="btn1">console</button>
+        <div id="editor1" style="height: 600px"></div>
+        <div id="output1"></div>
+      </div>
+      <div id="directory1" class="directory"></div>
+
+      <div>
+        <div id="directory2" class="directory"></div>
+        <button id="btn2">console</button>
+        <div id="editor2"></div>
+        <div id="output2"></div>
+      </div>
+    </div>
+
+    <script src="./index.js"></script>
+  </body>
+</html>

docs/index.js

@@ -0,0 +1,116 @@
+const Quill = window.Quill;
+const { default: HeaderList } = window.bundle;
+
+Quill.register({
+  [`modules/${HeaderList.moduleName}`]: HeaderList,
+}, true);
+
+const toolbarConfig = [
+  [HeaderList.toolName, 'clean'],
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'code-block', 'code'],
+  ['link', 'image', 'video', 'formula'],
+  [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  [{ script: 'sub' }, { script: 'super' }],
+  [{ indent: '-1' }, { indent: '+1' }],
+  [{ direction: 'rtl' }],
+  [{ size: ['small', false, 'large', 'huge'] }],
+  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  [{ color: [] }, { background: [] }],
+  [{ font: [] }],
+  [{ align: [] }],
+];
+
+const quill1 = new Quill('#editor1', {
+  // debug: 'info',
+  theme: 'snow',
+  modules: {
+    toolbar: {
+      container: toolbarConfig,
+      handlers: {
+        [HeaderList.toolName]: HeaderList.toolbarHandle,
+      },
+    },
+    [HeaderList.moduleName]: {
+      topOffset: 0,
+      // scrollContainer,
+      container: document.getElementById('directory1'),
+    },
+  },
+});
+
+const quill2 = new Quill('#editor2', {
+  // debug: 'info',
+  theme: 'snow',
+  modules: {
+    toolbar: {
+      container: toolbarConfig,
+      handlers: {
+        [HeaderList.toolName]: HeaderList.toolbarHandle,
+      },
+    },
+    [HeaderList.moduleName]: {
+      topOffset: 0,
+      scrollContainer: window,
+      container: document.getElementById('directory2'),
+    },
+  },
+});
+
+const quill = [
+  quill1,
+  quill2,
+];
+window.quill = quill;
+
+const output = [document.getElementById('output1'), document.getElementById('output2')];
+
+for (const [i, btn] of [document.getElementById('btn1'), document.getElementById('btn2')].entries()) {
+  btn.addEventListener('click', () => {
+    const content = quill[i].getContents();
+    console.log(content);
+    output[i].innerHTML = '';
+    // eslint-disable-next-line unicorn/no-array-for-each
+    content.forEach((content) => {
+      const item = document.createElement('li');
+      item.textContent = `${JSON.stringify(content)},`;
+      output[i].appendChild(item);
+    });
+  });
+}
+
+for (const q of quill) {
+  q.setContents([
+    { insert: 'header1' },
+    { attributes: { header: 1 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\nheader1.1' },
+    { attributes: { header: 2 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\nheader1.2' },
+    { attributes: { header: 2 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\nheader1.2.1' },
+    { attributes: { header: 3 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\nheader1.2.2' },
+    { attributes: { header: 3 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\nheader2' },
+    { attributes: { header: 2 }, insert: '\n' },
+    { insert: '\n\n\nheader2.1' },
+    { attributes: { header: 2 }, insert: '\n' },
+    { insert: '\n\nheader2.1.1' },
+    { attributes: { header: 3 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\nheader2.1.2' },
+    { attributes: { header: 3 }, insert: '\n' },
+    { insert: '\n\nheader2.1.2.1' },
+    { attributes: { header: 4 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\n\nheader2.1.2.1.1' },
+    { attributes: { header: 5 }, insert: '\n' },
+    { insert: '\n\nheader2.1.2.1.1.1' },
+    { attributes: { header: 6 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\nheader3' },
+    { attributes: { header: 2 }, insert: '\n' },
+    { insert: '\n\n\n\nheader3.1' },
+    { attributes: { header: 3 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nheader4' },
+    { attributes: { header: 2 }, insert: '\n' },
+    { insert: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n' },
+  ]);
+}

eslint.config.js

@@ -0,0 +1,11 @@
+import { factory } from '@zzxming/eslint-config';
+
+export default factory({
+  overrides: [
+    {
+      rules: {
+        'ts/ban-ts-comment': 'off',
+      },
+    },
+  ],
+});