@dotwee/quill 2.0.4

package/LICENSE

@@ -0,0 +1,31 @@
+Copyright (c) 2017-2024, Slab
+Copyright (c) 2014, Jason Chen
+Copyright (c) 2013, salesforce.com
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1. Redistributions of source code must retain the above copyright
+   notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,3 @@
+# Quill
+
+This is the main package of Quill.

package/babel.config.cjs

@@ -0,0 +1,12 @@
+const pkg = require('./package.json');
+
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { modules: false }],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    ['transform-define', { QUILL_VERSION: pkg.version }],
+    './scripts/babel-svg-inline-import.cjs',
+  ],
+};

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "@dotwee/quill",
+  "version": "2.0.4",
+  "description": "Your powerful, rich text editor",
+  "author": "Lukas Wolfsteiner <lukas@wolfsteiner.media>",
+  "homepage": "https://quilljs.com",
+  "main": "quill.js",
+  "type": "module",
+  "dependencies": {
+    "eventemitter3": "^5.0.1",
+    "lodash-es": "^4.17.21",
+    "parchment": "^3.0.0",
+    "quill-delta": "^5.1.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-typescript": "^7.23.3",
+    "@playwright/test": "^1.54.1",
+    "@types/highlight.js": "^9.12.4",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.10.0",
+    "@types/webpack": "^5.28.5",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitest/browser": "^3.2.4",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-transform-define": "^2.1.4",
+    "css-loader": "^6.10.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-import-resolver-webpack": "^0.13.8",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-require-extensions": "^0.1.3",
+    "glob": "10.4.2",
+    "highlight.js": "^9.18.1",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "jsdom": "^22.1.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "prettier": "^3.0.3",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^3.3.3",
+    "stylus": "^0.62.0",
+    "stylus-loader": "^7.1.3",
+    "svgo": "^3.2.0",
+    "terser-webpack-plugin": "^5.3.9",
+    "transpile-webpack-plugin": "^1.1.3",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.2",
+    "vitest": "^3.2.4",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.10.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotwee/quill.git",
+    "directory": "packages/quill"
+  },
+  "bugs": {
+    "url": "https://github.com/dotwee/quill/issues"
+  },
+  "prettier": {
+    "singleQuote": true
+  },
+  "browserslist": [
+    "defaults"
+  ],
+  "scripts": {
+    "build": "./scripts/build production",
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint .",
+    "lint:tsc": "tsc --noEmit --skipLibCheck",
+    "start": "[[ -z \"$npm_package_config_ports_webpack\" ]] && webpack-dev-server || webpack-dev-server --port $npm_package_config_ports_webpack",
+    "test": "run-s test:*",
+    "test:unit": "vitest --config test/unit/vitest.config.ts",
+    "test:fuzz": "vitest --config test/fuzz/vitest.config.ts",
+    "test:e2e": "playwright test"
+  },
+  "keywords": [
+    "quill",
+    "editor",
+    "rich text",
+    "wysiwyg",
+    "operational transformation",
+    "ot",
+    "framework"
+  ],
+  "engines": {
+    "npm": ">=8.2.3"
+  },
+  "engineStrict": true
+}

package/scripts/babel-svg-inline-import.cjs

@@ -0,0 +1,44 @@
+const fs = require('fs');
+const { dirname, resolve } = require('path');
+const { optimize } = require('svgo');
+
+module.exports = ({ types: t }) => {
+  class BabelSVGInlineImport {
+    constructor() {
+      return {
+        visitor: {
+          ImportDeclaration: {
+            exit(path, state) {
+              const givenPath = path.node.source.value;
+              if (!givenPath.endsWith('.svg')) {
+                return;
+              }
+              const specifier = path.node.specifiers[0];
+              const id = specifier.local.name;
+              const reference = state && state.file && state.file.opts.filename;
+              const absolutePath = resolve(dirname(reference), givenPath);
+              const content = optimize(
+                fs.readFileSync(absolutePath).toString(),
+                { plugins: [] },
+              ).data;
+
+              const variableValue = t.stringLiteral(content);
+              const variable = t.variableDeclarator(
+                t.identifier(id),
+                variableValue,
+              );
+
+              path.replaceWith({
+                type: 'VariableDeclaration',
+                kind: 'const',
+                declarations: [variable],
+              });
+            },
+          },
+        },
+      };
+    }
+  }
+
+  return new BabelSVGInlineImport();
+};

package/scripts/build

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+set -e
+
+DIST=dist
+
+TMPDIR=$(mktemp -d 2>/dev/null || mktemp -d -t 'mytmpdir')
+npx tsc --declaration --emitDeclarationOnly --outDir $TMPDIR
+
+rm -rf $DIST
+mkdir $DIST
+mv $TMPDIR/src/* $DIST
+rm -rf $TMPDIR
+npx babel src --out-dir $DIST --copy-files --no-copy-ignored --extensions .ts --source-maps
+npx webpack -- --mode $1
+# https://github.com/webpack-contrib/mini-css-extract-plugin/issues/151
+rm -rf $DIST/dist/*.css.js $DIST/dist/*.css.js.*
+cp package.json $DIST
+cp README.md $DIST
+cp LICENSE $DIST

package/src/assets/base.styl

@@ -0,0 +1,309 @@
+// Styles shared between snow and bubble
+
+controlHeight = 24px
+inputPaddingWidth = 5px
+inputPaddingHeight = 3px
+
+colorItemMargin = 2px
+colorItemSize = 16px
+colorItemsPerRow = 7
+
+
+.ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar
+  &:after
+    clear: both
+    content: ''
+    display: table
+
+  button
+    background: none
+    border: none
+    cursor: pointer
+    display: inline-block
+    float: left
+    height: controlHeight
+    padding: inputPaddingHeight inputPaddingWidth
+    width: controlHeight + (inputPaddingWidth - inputPaddingHeight)*2
+
+    svg
+      float: left
+      height: 100%
+
+    &:active:hover
+      outline: none
+
+  input.ql-image[type=file]
+    display: none
+
+  button:hover, button:focus, button.ql-active,
+  .ql-picker-label:hover, .ql-picker-label.ql-active,
+  .ql-picker-item:hover, .ql-picker-item.ql-selected
+    color: activeColor
+    .ql-fill, .ql-stroke.ql-fill
+      fill: activeColor
+    .ql-stroke, .ql-stroke-miter
+      stroke: activeColor
+
+// Fix for iOS not losing hover on touch
+@media (pointer: coarse)
+  .ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar
+    button:hover:not(.ql-active)
+      color: inactiveColor
+      .ql-fill, .ql-stroke.ql-fill
+        fill: inactiveColor
+      .ql-stroke, .ql-stroke-miter
+        stroke: inactiveColor
+
+.ql-{themeName}
+  box-sizing: border-box
+  *
+    box-sizing: border-box
+
+  .ql-hidden
+    display: none
+  .ql-out-bottom, .ql-out-top
+    visibility: hidden
+
+  .ql-tooltip
+    position: absolute
+    transform: translateY(10px)
+    a
+      cursor: pointer
+      text-decoration: none
+  .ql-tooltip.ql-flip
+    transform: translateY(-10px)
+
+  .ql-formats
+    &:after
+      clear: both
+      content: ''
+      display: table
+    display: inline-block
+    vertical-align: middle
+
+  .ql-stroke
+    fill: none
+    stroke: inactiveColor
+    stroke-linecap: round
+    stroke-linejoin: round
+    stroke-width: 2
+  .ql-stroke-miter
+    fill: none
+    stroke: inactiveColor
+    stroke-miterlimit: 10
+    stroke-width: 2
+
+  .ql-fill, .ql-stroke.ql-fill
+    fill: inactiveColor
+
+  .ql-empty
+    fill: none
+  .ql-even
+    fill-rule: evenodd
+  .ql-thin, .ql-stroke.ql-thin
+    stroke-width: 1
+  .ql-transparent
+    opacity: 0.4
+
+  .ql-direction
+    svg:last-child
+      display: none
+  .ql-direction.ql-active
+    svg:last-child
+      display: inline
+    svg:first-child
+      display: none
+
+  .ql-editor
+    h1
+      font-size: 2em
+    h2
+      font-size: 1.5em
+    h3
+      font-size: 1.17em
+    h4
+      font-size: 1em
+    h5
+      font-size: 0.83em
+    h6
+      font-size: 0.67em
+    a
+      text-decoration: underline
+    blockquote
+      border-left: 4px solid #ccc
+      margin-bottom: 5px
+      margin-top: 5px
+      padding-left: 16px
+    code, .ql-code-block-container
+      background-color: #f0f0f0
+      border-radius: 3px
+    .ql-code-block-container
+      margin-bottom: 5px
+      margin-top: 5px
+      padding: 5px 10px
+    code
+      font-size: 85%
+      padding: 2px 4px
+    .ql-code-block-container
+      background-color: #23241f
+      color: #f8f8f2
+      overflow: visible
+    img
+      max-width: 100%
+
+  .ql-picker
+    color: inactiveColor
+    display: inline-block
+    float: left
+    font-size: 14px
+    font-weight: 500
+    height: controlHeight
+    position: relative
+    vertical-align: middle
+  .ql-picker-label
+    cursor: pointer
+    display: inline-block
+    height: 100%
+    padding-left: 8px
+    padding-right: 2px
+    position: relative
+    width: 100%
+    &::before
+      display: inline-block
+      line-height: 22px
+  .ql-picker-options
+    background-color: backgroundColor
+    display: none
+    min-width: 100%
+    padding: 4px 8px
+    position: absolute
+    white-space: nowrap
+    .ql-picker-item
+      cursor: pointer
+      display: block
+      padding-bottom: 5px
+      padding-top: 5px
+  .ql-picker.ql-expanded
+    .ql-picker-label
+      color: borderColor
+      z-index: 2
+      .ql-fill
+        fill: borderColor
+      .ql-stroke
+        stroke: borderColor
+    .ql-picker-options
+      display: block
+      margin-top: -1px
+      top: 100%
+      z-index: 1
+
+  .ql-color-picker, .ql-icon-picker
+    width: controlHeight + 4
+    .ql-picker-label
+      padding: 2px 4px
+      svg
+        right: 4px
+  .ql-icon-picker
+    .ql-picker-options
+      padding: 4px 0px
+    .ql-picker-item
+      height: controlHeight
+      width: controlHeight
+      padding: 2px 4px
+  .ql-color-picker
+    .ql-picker-options
+      padding: inputPaddingHeight inputPaddingWidth
+      width: (colorItemSize + 2*colorItemMargin) * colorItemsPerRow + 2*inputPaddingWidth + 2  // +2 for the border
+    .ql-picker-item
+      border: 1px solid transparent
+      float: left
+      height: colorItemSize
+      margin: colorItemMargin
+      padding: 0px
+      width: colorItemSize
+
+  .ql-picker:not(.ql-color-picker):not(.ql-icon-picker)
+    svg
+      position: absolute
+      margin-top: -9px
+      right: 0
+      top: 50%
+      width: 18px
+
+  .ql-picker.ql-header, .ql-picker.ql-font, .ql-picker.ql-size
+    .ql-picker-label[data-label]:not([data-label='']),
+    .ql-picker-item[data-label]:not([data-label=''])
+      &::before
+        content: attr(data-label)
+
+  .ql-picker.ql-header
+    width: 98px
+    .ql-picker-label::before,
+    .ql-picker-item::before
+      content: 'Normal'
+    for num in (1..6)
+      .ql-picker-label[data-value=\"{num}\"]::before,
+      .ql-picker-item[data-value=\"{num}\"]::before
+        content: 'Heading ' + num
+    .ql-picker-item[data-value="1"]::before
+      font-size: 2em
+    .ql-picker-item[data-value="2"]::before
+      font-size: 1.5em
+    .ql-picker-item[data-value="3"]::before
+      font-size: 1.17em
+    .ql-picker-item[data-value="4"]::before
+      font-size: 1em
+    .ql-picker-item[data-value="5"]::before
+      font-size: 0.83em
+    .ql-picker-item[data-value="6"]::before
+      font-size: 0.67em
+
+  .ql-picker.ql-font
+    width: 108px
+    .ql-picker-label::before,
+    .ql-picker-item::before
+      content: 'Sans Serif'
+    .ql-picker-label[data-value=serif]::before,
+    .ql-picker-item[data-value=serif]::before
+      content: 'Serif'
+    .ql-picker-label[data-value=monospace]::before,
+    .ql-picker-item[data-value=monospace]::before
+      content: 'Monospace'
+    .ql-picker-item[data-value=serif]::before
+      font-family: Georgia, Times New Roman, serif
+    .ql-picker-item[data-value=monospace]::before
+      font-family: Monaco, Courier New, monospace
+
+  .ql-picker.ql-size
+    width: 98px
+    .ql-picker-label::before,
+    .ql-picker-item::before
+      content: 'Normal'
+    .ql-picker-label[data-value=small]::before,
+    .ql-picker-item[data-value=small]::before
+      content: 'Small'
+    .ql-picker-label[data-value=large]::before,
+    .ql-picker-item[data-value=large]::before
+      content: 'Large'
+    .ql-picker-label[data-value=huge]::before,
+    .ql-picker-item[data-value=huge]::before
+      content: 'Huge'
+    .ql-picker-item[data-value=small]::before
+      font-size: 10px
+    .ql-picker-item[data-value=large]::before
+      font-size: 18px
+    .ql-picker-item[data-value=huge]::before
+      font-size: 32px
+
+  .ql-color-picker.ql-background
+    .ql-picker-item
+      background-color: #fff
+  .ql-color-picker.ql-color
+    .ql-picker-item
+      background-color: #000
+
+.ql-code-block-container
+  position: relative
+  .ql-ui
+    right: 5px
+    top: 5px

package/src/assets/bubble/toolbar.styl

@@ -0,0 +1,14 @@
+arrowWidth = 6px
+
+.ql-bubble
+  .ql-toolbar
+    .ql-formats
+      margin: 8px 12px 8px 0px
+    .ql-formats:first-child
+      margin-left: 12px
+
+  .ql-color-picker
+    svg
+      margin: 1px
+    .ql-picker-item.ql-selected, .ql-picker-item:hover
+      border-color: activeColor

package/src/assets/bubble/tooltip.styl

@@ -0,0 +1,49 @@
+arrowWidth = 6px
+
+.ql-bubble
+  .ql-tooltip
+    background-color: backgroundColor
+    border-radius: 25px
+    color: textColor
+  .ql-tooltip-arrow
+    border-left: arrowWidth solid transparent
+    border-right: arrowWidth solid transparent
+    content: " "
+    display: block
+    left: 50%
+    margin-left: -1 * arrowWidth
+    position: absolute
+  .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow
+    border-bottom: arrowWidth solid backgroundColor
+    top: -1 * arrowWidth
+  .ql-tooltip.ql-flip .ql-tooltip-arrow
+    border-top: arrowWidth solid backgroundColor
+    bottom: -1 * arrowWidth
+
+  .ql-tooltip.ql-editing
+    .ql-tooltip-editor
+      display: block
+    .ql-formats
+      visibility: hidden
+
+  .ql-tooltip-editor
+    display: none
+    input[type=text]
+      background: transparent
+      border: none
+      color: textColor
+      font-size: 13px
+      height: 100%
+      outline: none
+      padding: 10px 20px
+      position: absolute
+      width: 100%
+    a
+      &:before
+        color: inactiveColor
+        content: "\00D7"
+        font-size: 16px
+        font-weight: bold
+      top: 10px
+      position: absolute
+      right: 20px

package/src/assets/bubble.styl

@@ -0,0 +1,45 @@
+themeName = 'bubble'
+activeColor = #fff
+borderColor = #777
+backgroundColor = #444
+inactiveColor = #ccc
+shadowColor = #ddd
+textColor = #fff
+
+@import './core'
+@import './base'
+@import './bubble/*'
+
+.ql-container.ql-bubble:not(.ql-disabled)
+  a:not(.ql-close)
+    position: relative
+    white-space: nowrap
+  a:not(.ql-close)::before
+    background-color: #444
+    border-radius: 15px
+    top: -5px
+    font-size: 12px
+    color: #fff
+    content: attr(href)
+    font-weight: normal
+    overflow: hidden
+    padding: 5px 15px
+    text-decoration: none
+    z-index: 1
+  a:not(.ql-close)::after
+    border-top: 6px solid #444
+    border-left: 6px solid transparent
+    border-right: 6px solid transparent
+    top: 0
+    content: " "
+    height: 0
+    width: 0
+  a:not(.ql-close)::before, a:not(.ql-close)::after
+    left: 0
+    margin-left: 50%
+    position: absolute
+    transform: translate(-50%, -100%)
+    transition: visibility 0s ease 200ms
+    visibility: hidden
+  a:not(.ql-close):hover::before, a:not(.ql-close):hover::after
+    visibility: visible