From 79f937c2a5311b06d3e6ede098021c4ac466388e Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Tue, 12 Mar 2024 20:03:42 +0530 Subject: [PATCH 1/8] Test --- package-lock.json | 158 ++++++-- package.json | 3 + stencil-workspace/package-lock.json | 345 ++++++++++++++++- stencil-workspace/package.json | 3 +- .../modus-text-editor/modus-text-editor.scss | 47 +++ .../modus-text-editor/modus-text-editor.tsx | 25 ++ .../modus-text-editor/quill-editor.tsx | 352 ++++++++++++++++++ stencil-workspace/src/index.html | 33 ++ 8 files changed, 939 insertions(+), 27 deletions(-) create mode 100644 stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss create mode 100644 stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx create mode 100644 stencil-workspace/src/components/modus-text-editor/quill-editor.tsx diff --git a/package-lock.json b/package-lock.json index 6fdf057f8..897689de1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,43 +8,155 @@ "name": "modus-web-components", "version": "1.0.0", "license": "MIT", + "dependencies": { + "stencil-quill": "^10.0.0" + }, "engines": { - "node": ">=16.14.0" + "node": ">=16.20.2" } }, - "node_modules/@stencil/angular-output-target": { - "version": "0.6.1-dev.11657573317.16e0205c", - "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.1-dev.11657573317.16e0205c.tgz", - "integrity": "sha512-dSD2d8itnD8xa5vRRoOFjWiSd813L+/vuulolDl22k7urBWdH8pGDlBu5uhatEjZD12d6C0blFBlWpy25YFjBw==", - "peerDependencies": { - "@stencil/core": "^2.9.0" + "node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "peer": true + }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "peer": true + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", + "peer": true + }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", + "peer": true + }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "peer": true + }, + "node_modules/parchment": { + "version": "3.0.0-alpha.2", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0-alpha.2.tgz", + "integrity": "sha512-r/DoIj7e8efiTWUg+BHUlolpdE9/iNVtcFg8i7SvdlF7a7fgTAAwcXrpamNrf49IsGykyDcsfUZKGFVwMXZcyg==", + "peer": true + }, + "node_modules/quill": { + "version": "2.0.0-rc.0", + "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.0-rc.0.tgz", + "integrity": "sha512-LC9TCvNiHn0U2q5o1a/G1IdkdrcMRcCXuXl39duiPKPded8FzaNVy4yzZGvZlzRYHAw4/WA4jzXyKI1kRivx9Q==", + "peer": true, + "dependencies": { + "eventemitter3": "^5.0.1", + "lodash-es": "^4.17.21", + "parchment": "^3.0.0-alpha.2", + "quill-delta": "^5.1.0" + }, + "engines": { + "npm": ">=8.2.3" } }, - "node_modules/@stencil/core": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.13.0.tgz", - "integrity": "sha512-EEKHOHgYpg3/iFUKMXTZJjUayRul7sXDwNw0OGgkEOe4t7JWiibDkzUHuruvpbqEydX+z1+ez5K2bMMY76c2wA==", + "node_modules/quill-delta": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", + "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", "peer": true, - "bin": { - "stencil": "bin/stencil" + "dependencies": { + "fast-diff": "^1.3.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isequal": "^4.5.0" }, "engines": { - "node": ">=12.10.0", - "npm": ">=6.0.0" + "node": ">= 12.0.0" + } + }, + "node_modules/stencil-quill": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/stencil-quill/-/stencil-quill-10.0.0.tgz", + "integrity": "sha512-trGlStyPCnrmQHc0Q2eQNrTVp4nHCbeRcv9DnkpQQJx+SA/baDkqK6ktBZjmfuQMdNoaU7dyG+Y7sxfHpvXA2g==", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "quill": "2.0.0-rc.0" } } }, "dependencies": { - "@stencil/angular-output-target": { - "version": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.6.1-dev.11657573317.16e0205c.tgz", - "integrity": "sha512-dSD2d8itnD8xa5vRRoOFjWiSd813L+/vuulolDl22k7urBWdH8pGDlBu5uhatEjZD12d6C0blFBlWpy25YFjBw==", - "requires": {} + "eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "peer": true + }, + "fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "peer": true + }, + "lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", + "peer": true + }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", + "peer": true }, - "@stencil/core": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.13.0.tgz", - "integrity": "sha512-EEKHOHgYpg3/iFUKMXTZJjUayRul7sXDwNw0OGgkEOe4t7JWiibDkzUHuruvpbqEydX+z1+ez5K2bMMY76c2wA==", + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", "peer": true + }, + "parchment": { + "version": "3.0.0-alpha.2", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0-alpha.2.tgz", + "integrity": "sha512-r/DoIj7e8efiTWUg+BHUlolpdE9/iNVtcFg8i7SvdlF7a7fgTAAwcXrpamNrf49IsGykyDcsfUZKGFVwMXZcyg==", + "peer": true + }, + "quill": { + "version": "2.0.0-rc.0", + "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.0-rc.0.tgz", + "integrity": "sha512-LC9TCvNiHn0U2q5o1a/G1IdkdrcMRcCXuXl39duiPKPded8FzaNVy4yzZGvZlzRYHAw4/WA4jzXyKI1kRivx9Q==", + "peer": true, + "requires": { + "eventemitter3": "^5.0.1", + "lodash-es": "^4.17.21", + "parchment": "^3.0.0-alpha.2", + "quill-delta": "^5.1.0" + } + }, + "quill-delta": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", + "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", + "peer": true, + "requires": { + "fast-diff": "^1.3.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isequal": "^4.5.0" + } + }, + "stencil-quill": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/stencil-quill/-/stencil-quill-10.0.0.tgz", + "integrity": "sha512-trGlStyPCnrmQHc0Q2eQNrTVp4nHCbeRcv9DnkpQQJx+SA/baDkqK6ktBZjmfuQMdNoaU7dyG+Y7sxfHpvXA2g==", + "requires": {} } } } diff --git a/package.json b/package.json index 3c4fa1d37..681a24920 100644 --- a/package.json +++ b/package.json @@ -20,5 +20,8 @@ }, "engines": { "node": ">=16.20.2" + }, + "dependencies": { + "stencil-quill": "^10.0.0" } } diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json index a76031c63..f28e9522c 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -11,7 +11,8 @@ "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", - "@tanstack/table-core": "^8.11.6" + "@tanstack/table-core": "^8.11.6", + "quill": "^1.3.7" }, "devDependencies": { "@stencil/angular-output-target": "^0.8.4", @@ -2352,6 +2353,24 @@ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "dev": true }, + "node_modules/call-bind": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -2557,6 +2576,14 @@ "wrap-ansi": "^7.0.0" } }, + "node_modules/clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -2846,6 +2873,25 @@ "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==", "dev": true }, + "node_modules/deep-equal": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz", + "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==", + "dependencies": { + "is-arguments": "^1.1.1", + "is-date-object": "^1.0.5", + "is-regex": "^1.1.4", + "object-is": "^1.1.5", + "object-keys": "^1.1.1", + "regexp.prototype.flags": "^1.5.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -2861,6 +2907,38 @@ "node": ">=0.10.0" } }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/define-properties": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", + "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", + "dependencies": { + "define-data-property": "^1.0.1", + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -3063,6 +3141,25 @@ "is-arrayish": "^0.2.1" } }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -3327,6 +3424,11 @@ "node": ">=0.10.0" } }, + "node_modules/eventemitter3": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==" + }, "node_modules/execa": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", @@ -3374,6 +3476,11 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" + }, "node_modules/extract-zip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", @@ -3415,6 +3522,11 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "node_modules/fast-diff": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==" + }, "node_modules/fast-glob": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", @@ -3638,7 +3750,14 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/functions-have-names": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", + "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3661,6 +3780,24 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/get-intrinsic": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/get-package-type": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", @@ -3793,6 +3930,17 @@ "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", "dev": true }, + "node_modules/gopd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", + "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", + "dependencies": { + "get-intrinsic": "^1.1.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", @@ -3823,11 +3971,57 @@ "node": ">=8" } }, + "node_modules/has-property-descriptors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", + "dependencies": { + "es-define-property": "^1.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-proto": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/hasown": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", - "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -4078,6 +4272,21 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, + "node_modules/is-arguments": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", + "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -4096,6 +4305,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-date-object": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", + "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -4177,6 +4400,21 @@ "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", "dev": true }, + "node_modules/is-regex": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -5470,6 +5708,29 @@ "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", "dev": true }, + "node_modules/object-is": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", + "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/object-keys": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", + "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -5550,6 +5811,11 @@ "node": ">=6" } }, + "node_modules/parchment": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", + "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -6067,6 +6333,32 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/quill": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", + "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", + "dependencies": { + "clone": "^2.1.1", + "deep-equal": "^1.0.1", + "eventemitter3": "^2.0.3", + "extend": "^3.0.2", + "parchment": "^1.1.4", + "quill-delta": "^3.6.2" + } + }, + "node_modules/quill-delta": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", + "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "dependencies": { + "deep-equal": "^1.0.1", + "extend": "^3.0.2", + "fast-diff": "1.1.2" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -6162,6 +6454,23 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/regexp.prototype.flags": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", + "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==", + "dependencies": { + "call-bind": "^1.0.6", + "define-properties": "^1.2.1", + "es-errors": "^1.3.0", + "set-function-name": "^2.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -6370,6 +6679,36 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/set-function-name": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz", + "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==", + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "functions-have-names": "^1.2.3", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json index 3ccef5de8..a09337465 100644 --- a/stencil-workspace/package.json +++ b/stencil-workspace/package.json @@ -42,7 +42,8 @@ "dependencies": { "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", - "@tanstack/table-core": "^8.11.6" + "@tanstack/table-core": "^8.11.6", + "quill": "^1.3.7" }, "devDependencies": { "@stencil/angular-output-target": "^0.8.4", diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss new file mode 100644 index 000000000..c936365bb --- /dev/null +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss @@ -0,0 +1,47 @@ +/* my-rich-text-editor.css */ +/* Adjust the size of the editor container */ +.editor-container { + width: 100%; + height: 300px; /* Adjust height as needed */ +} + +/* Adjust the size and appearance of Quill toolbar buttons and icons */ +.ql-toolbar { + border: 1px solid #ccc; + border-radius: 4px; + background-color: #f9f9f9; + padding: 8px; +} + +.ql-toolbar .ql-picker { + width: auto; + padding: 4px; +} + +.ql-toolbar .ql-picker-label { + padding: 2px; +} + +.ql-toolbar .ql-picker-options { + padding: 4px; +} + +.ql-toolbar .ql-picker-item { + padding: 2px; +} + +.ql-toolbar .ql-picker-label svg { + width: 16px; + height: 16px; +} + +/* Adjust the size and appearance of Quill editor content */ +.ql-container { + border: 1px solid #ccc; + border-radius: 4px; +} + +.ql-editor { + min-height: 200px; /* Adjust min-height as needed */ + font-size: 14px; /* Adjust font size as needed */ +} diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx new file mode 100644 index 000000000..e47488759 --- /dev/null +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx @@ -0,0 +1,25 @@ +import { Component, h, Element } from '@stencil/core'; +import Quill from 'quill'; + +@Component({ + tag: 'modus-text-editor', + styleUrl: 'modus-text-editor.scss', + shadow: true, +}) +export class MyRichTextEditor { + @Element() hostElement; + + quillInstance: Quill; + + componentDidLoad() { + // Initialize Quill editor inside the shadow DOM + const editorContainer = this.hostElement.shadowRoot.querySelector('.editor-container'); + this.quillInstance = new Quill(editorContainer, { + theme: 'snow', // You can change the theme here + }); + } + + render() { + return
{/* This is where the Quill editor will be rendered */}
; + } +} diff --git a/stencil-workspace/src/components/modus-text-editor/quill-editor.tsx b/stencil-workspace/src/components/modus-text-editor/quill-editor.tsx new file mode 100644 index 000000000..909ee4a6d --- /dev/null +++ b/stencil-workspace/src/components/modus-text-editor/quill-editor.tsx @@ -0,0 +1,352 @@ +import { h, Component, ComponentDidLoad, Element, Event, EventEmitter, Prop, Watch, Host } from '@stencil/core'; + +declare const Quill: any; + +@Component({ + tag: 'quill-editor', + scoped: true, + shadow: false, +}) +export class QuillEditorComponent implements ComponentDidLoad { + @Event() editorInit: EventEmitter; + @Event() editorChange: EventEmitter< + | { + editor: any; + event: 'text-change'; + content: any; + text: string; + html: string; + delta: any; + oldDelta: any; + source: string; + } + | { + editor: any; + event: 'selection-change'; + range: any; + oldRange: any; + source: string; + } + >; + @Event() editorContentChange: EventEmitter<{ + editor: any; + content: any; + text: string; + html: string; + delta: any; + oldDelta: any; + source: string; + }>; + @Event() editorSelectionChange: EventEmitter<{ + editor: any; + range: any; + oldRange: any; + source: string; + }>; + @Event() editorFocus: EventEmitter<{ + editor: any; + source: string; + }>; + @Event() editorBlur: EventEmitter<{ + editor: any; + source: string; + }>; + + @Element() wrapperElement: HTMLElement; + + @Prop() format: 'html' | 'text' | 'json' = 'html'; + @Prop() bounds: HTMLElement | string; + @Prop() content: string; + @Prop() debug = 'warn'; + @Prop() formats: string[]; + @Prop() modules?: string; + @Prop() placeholder = 'Insert text here ...'; + @Prop() readOnly: boolean; + @Prop() styles = '{}'; + @Prop() theme = 'snow'; + @Prop() customToolbarPosition: 'top' | 'bottom' = 'top'; + @Prop() preserveWhitespace = false; + + quillEditor: any; + editorElement: HTMLDivElement | HTMLPreElement; + private defaultModules = { + toolbar: [ + ['bold', 'italic', 'underline', 'strike'], // toggled buttons + ['blockquote', 'code-block'], + + [{ header: 1 }, { header: 2 }], // custom button values + [{ list: 'ordered' }, { list: 'bullet' }], + [{ script: 'sub' }, { script: 'super' }], // superscript/subscript + [{ indent: '-1' }, { indent: '+1' }], // outdent/indent + [{ direction: 'rtl' }], // text direction + + [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown + [{ header: [1, 2, 3, 4, 5, 6, false] }], + + [{ color: [].slice() }, { background: [].slice() }], // dropdown with defaults from theme + [{ font: [].slice() }], + [{ align: [].slice() }], + + ['clean'], // remove formatting button + + ['link', 'image', 'video'], // link and image, video + ], + }; + + selectionChangeEvent: any; + textChangeEvent: any; + editorChangeEvent: any; + + setEditorContent(value: any) { + if (this.format === 'html') { + const contents = this.quillEditor.clipboard.convert(value); + this.quillEditor.setContents(contents, 'api'); + } else if (this.format === 'text') { + this.quillEditor.setText(value, 'api'); + } else if (this.format === 'json') { + try { + this.quillEditor.setContents(JSON.parse(value), 'api'); + } catch (e) { + this.quillEditor.setText(value, 'api'); + } + } else { + this.quillEditor.setText(value, 'api'); + } + } + + getEditorContent() { + const text = this.quillEditor.getText(); + const content = this.quillEditor.getContents(); + + let html: string | null = this.editorElement.children[0].innerHTML; + if (html === '


' || html === '

') { + html = ''; + } + + if (this.format === 'html') { + return html; + } else if (this.format === 'text') { + return text; + } else if (this.format === 'json') { + try { + return JSON.stringify(content); + } catch (e) { + return text; + } + } else { + return text; + } + } + + componentDidLoad() { + this.editorElement = this.preserveWhitespace ? document.createElement('pre') : document.createElement('div'); + this.editorElement.setAttribute('quill-editor', ''); + + const modules: any = this.modules ? JSON.parse(this.modules) : this.defaultModules; + + const toolbarElem = this.wrapperElement.querySelector('[slot="quill-toolbar"]'); + if (toolbarElem) { + modules['toolbar'] = toolbarElem; + if (this.customToolbarPosition === 'bottom') { + this.wrapperElement.prepend(this.editorElement); + } else { + this.wrapperElement.append(this.editorElement); + } + } else { + this.wrapperElement.append(this.editorElement); + } + + this.quillEditor = new Quill(this.editorElement, { + debug: this.debug, + modules: modules, + placeholder: this.placeholder, + readOnly: this.readOnly || false, + theme: this.theme || 'snow', + formats: this.formats, + bounds: this.bounds ? (this.bounds === 'self' ? this.editorElement : this.bounds) : document.body, + }); + + if (this.styles) { + const styles = JSON.parse(this.styles); + Object.keys(styles).forEach((key: string) => { + this.editorElement.style.setProperty(key, styles[key]); + }); + } + + if (this.content) { + this.setEditorContent(this.content); + + this.quillEditor['history'].clear(); + } + + this.editorChangeEvent = this.quillEditor.on( + 'editor-change', + ( + event: 'text-change' | 'selection-change', + current: any | Range | null, + old: any | Range | null, + source: string + ): void => { + // only emit changes emitted by user interactions + + if (event === 'text-change') { + const text = this.quillEditor.getText(); + const content = this.quillEditor.getContents(); + + let html: string | null = this.editorElement.querySelector('.ql-editor')!.innerHTML; + if (html === '


' || html === '

') { + html = null; + } + + this.editorChange.emit({ + content, + delta: current, + editor: this.quillEditor, + event, + html, + oldDelta: old, + source, + text, + }); + } else { + this.editorChange.emit({ + editor: this.quillEditor, + event, + oldRange: old, + range: current, + source, + }); + } + } + ); + + this.selectionChangeEvent = this.quillEditor.on('selection-change', (range: any, oldRange: any, source: string) => { + if (range === null) { + this.editorBlur.emit({ + editor: this.quillEditor, + source, + }); + } else if (oldRange === null) { + this.editorFocus.emit({ + editor: this.quillEditor, + source, + }); + } + + this.editorSelectionChange.emit({ + editor: this.quillEditor, + range, + oldRange, + source, + }); + }); + + this.textChangeEvent = this.quillEditor.on('text-change', (delta: any, oldDelta: any, source: string) => { + const text = this.quillEditor.getText(); + const content = this.quillEditor.getContents(); + + let html: string | null = this.editorElement.querySelector('.ql-editor').innerHTML; + if (html === '


' || html === '

') { + html = null; + } + + this.editorContentChange.emit({ + editor: this.quillEditor, + content, + delta, + html, + oldDelta, + source, + text, + }); + }); + + setTimeout(() => { + this.editorInit.emit(this.quillEditor); + }); + } + + disconnectedCallback() { + if (this.selectionChangeEvent) { + this.selectionChangeEvent.removeListener('selection-change'); + } + if (this.textChangeEvent) { + this.textChangeEvent.removeListener('text-change'); + } + if (this.editorChangeEvent) { + this.editorChangeEvent.removeListener('editor-change'); + } + } + + @Watch('content') + updateContent(newValue: any): void { + if (!this.quillEditor) { + return; + } + const editorContents = this.getEditorContent(); + + if (['text', 'html', 'json'].indexOf(this.format) > -1 && newValue === editorContents) { + return null; + } else { + let changed = false; + try { + const newContentString = JSON.stringify(newValue); + changed = JSON.stringify(editorContents) !== newContentString; + } catch { + return null; + } + + if (!changed) { + return null; + } + } + + this.setEditorContent(newValue); + } + + @Watch('readOnly') + updateReadOnly(newValue: boolean, oldValue: boolean): void { + if (!this.quillEditor) { + return; + } + if (newValue !== oldValue) { + this.quillEditor.enable(!newValue); + } + } + + @Watch('placeholder') + updatePlaceholder(newValue: string, oldValue: string): void { + if (!this.quillEditor) { + return; + } + if (newValue !== oldValue) { + this.quillEditor.root.dataset.placeholder = newValue; + } + } + + @Watch('styles') + updateStyle(newValue: string, oldValue: string): void { + if (!this.editorElement) { + return; + } + + if (oldValue) { + const old = JSON.parse(oldValue); + Object.keys(old).forEach((key: string) => { + this.editorElement.style.setProperty(key, ''); + }); + } + if (newValue) { + const value = JSON.parse(newValue); + Object.keys(value).forEach((key: string) => { + this.editorElement.style.setProperty(key, value[key]); + }); + } + } + + render() { + + + ; + } +} diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html index 7ca3e98ae..96e9059e3 100644 --- a/stencil-workspace/src/index.html +++ b/stencil-workspace/src/index.html @@ -17,5 +17,38 @@ +

Modus Editor

+ + + + + + + + + Stencil Quill + + + + + + + + + + + + + + + + + + + From 84a30b2224fb55ea0e3e3aacbf4a0b94d9075486 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Wed, 13 Mar 2024 15:57:34 +0530 Subject: [PATCH 2/8] Update css --- stencil-workspace/package-lock.json | 369 +---- stencil-workspace/package.json | 2 +- stencil-workspace/src/components.d.ts | 146 ++ .../modus-text-editor/modus-text-editor.scss | 1332 ++++++++++++++++- .../modus-text-editor/modus-text-editor.tsx | 20 +- stencil-workspace/src/index.html | 28 - 6 files changed, 1515 insertions(+), 382 deletions(-) diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json index f28e9522c..9cf6713dd 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -12,7 +12,7 @@ "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", "@tanstack/table-core": "^8.11.6", - "quill": "^1.3.7" + "quill": "^2.0.0-rc.2" }, "devDependencies": { "@stencil/angular-output-target": "^0.8.4", @@ -2353,24 +2353,6 @@ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "dev": true }, - "node_modules/call-bind": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", - "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", - "dependencies": { - "es-define-property": "^1.0.0", - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.4", - "set-function-length": "^1.2.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -2576,14 +2558,6 @@ "wrap-ansi": "^7.0.0" } }, - "node_modules/clone": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", - "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", - "engines": { - "node": ">=0.8" - } - }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -2873,25 +2847,6 @@ "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==", "dev": true }, - "node_modules/deep-equal": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz", - "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==", - "dependencies": { - "is-arguments": "^1.1.1", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "regexp.prototype.flags": "^1.5.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -2907,38 +2862,6 @@ "node": ">=0.10.0" } }, - "node_modules/define-data-property": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", - "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", - "dependencies": { - "es-define-property": "^1.0.0", - "es-errors": "^1.3.0", - "gopd": "^1.0.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/define-properties": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", - "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", - "dependencies": { - "define-data-property": "^1.0.1", - "has-property-descriptors": "^1.0.0", - "object-keys": "^1.1.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -3141,25 +3064,6 @@ "is-arrayish": "^0.2.1" } }, - "node_modules/es-define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", - "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", - "dependencies": { - "get-intrinsic": "^1.2.4" - }, - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/es-errors": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", - "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", - "engines": { - "node": ">= 0.4" - } - }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -3425,9 +3329,9 @@ } }, "node_modules/eventemitter3": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", - "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==" + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" }, "node_modules/execa": { "version": "5.1.1", @@ -3476,11 +3380,6 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, - "node_modules/extend": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" - }, "node_modules/extract-zip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", @@ -3523,9 +3422,9 @@ "dev": true }, "node_modules/fast-diff": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", - "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==" }, "node_modules/fast-glob": { "version": "3.3.1", @@ -3750,14 +3649,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/functions-have-names": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", - "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", + "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3780,24 +3672,6 @@ "node": "6.* || 8.* || >= 10.*" } }, - "node_modules/get-intrinsic": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", - "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", - "dependencies": { - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", - "has-proto": "^1.0.1", - "has-symbols": "^1.0.3", - "hasown": "^2.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/get-package-type": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", @@ -3930,17 +3804,6 @@ "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", "dev": true }, - "node_modules/gopd": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", - "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", - "dependencies": { - "get-intrinsic": "^1.1.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", @@ -3971,57 +3834,11 @@ "node": ">=8" } }, - "node_modules/has-property-descriptors": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", - "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", - "dependencies": { - "es-define-property": "^1.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-proto": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", - "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-symbols": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", - "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-tostringtag": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", - "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", - "dependencies": { - "has-symbols": "^1.0.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/hasown": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -4272,21 +4089,6 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, - "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -4305,20 +4107,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-date-object": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", - "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", - "dependencies": { - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -4400,21 +4188,6 @@ "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", "dev": true }, - "node_modules/is-regex": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", - "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -5339,6 +5112,21 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==" + }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -5708,29 +5496,6 @@ "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", "dev": true }, - "node_modules/object-is": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", - "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", - "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/object-keys": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", - "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", - "engines": { - "node": ">= 0.4" - } - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -5812,9 +5577,9 @@ } }, "node_modules/parchment": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", - "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==" + "version": "3.0.0-alpha.2", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0-alpha.2.tgz", + "integrity": "sha512-r/DoIj7e8efiTWUg+BHUlolpdE9/iNVtcFg8i7SvdlF7a7fgTAAwcXrpamNrf49IsGykyDcsfUZKGFVwMXZcyg==" }, "node_modules/parent-module": { "version": "1.0.1", @@ -6334,29 +6099,30 @@ } }, "node_modules/quill": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", - "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", + "version": "2.0.0-rc.2", + "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.0-rc.2.tgz", + "integrity": "sha512-3uh7uZqXpN4t0HmHCjBHXSaeSgYNij6LP1t8ncEjr6+JMq5zR6svpH5Frx7Lxmxv1DUHYDE28eV7R3f4r8Z2Kw==", "dependencies": { - "clone": "^2.1.1", - "deep-equal": "^1.0.1", - "eventemitter3": "^2.0.3", - "extend": "^3.0.2", - "parchment": "^1.1.4", - "quill-delta": "^3.6.2" + "eventemitter3": "^5.0.1", + "lodash-es": "^4.17.21", + "parchment": "^3.0.0-alpha.2", + "quill-delta": "^5.1.0" + }, + "engines": { + "npm": ">=8.2.3" } }, "node_modules/quill-delta": { - "version": "3.6.3", - "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", - "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", + "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", "dependencies": { - "deep-equal": "^1.0.1", - "extend": "^3.0.2", - "fast-diff": "1.1.2" + "fast-diff": "^1.3.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isequal": "^4.5.0" }, "engines": { - "node": ">=0.10" + "node": ">= 12.0.0" } }, "node_modules/react-is": { @@ -6454,23 +6220,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/regexp.prototype.flags": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", - "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==", - "dependencies": { - "call-bind": "^1.0.6", - "define-properties": "^1.2.1", - "es-errors": "^1.3.0", - "set-function-name": "^2.0.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -6679,36 +6428,6 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, - "node_modules/set-function-length": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", - "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", - "dependencies": { - "define-data-property": "^1.1.4", - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.4", - "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/set-function-name": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz", - "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==", - "dependencies": { - "define-data-property": "^1.1.4", - "es-errors": "^1.3.0", - "functions-have-names": "^1.2.3", - "has-property-descriptors": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json index a09337465..1ce5e627f 100644 --- a/stencil-workspace/package.json +++ b/stencil-workspace/package.json @@ -43,7 +43,7 @@ "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", "@tanstack/table-core": "^8.11.6", - "quill": "^1.3.7" + "quill": "^2.0.0-rc.2" }, "devDependencies": { "@stencil/angular-output-target": "^0.8.4", diff --git a/stencil-workspace/src/components.d.ts b/stencil-workspace/src/components.d.ts index fcaca99e1..4069a2dee 100644 --- a/stencil-workspace/src/components.d.ts +++ b/stencil-workspace/src/components.d.ts @@ -1304,6 +1304,8 @@ export namespace Components { */ "tabs": Tab[]; } + interface ModusTextEditor { + } interface ModusTextInput { /** * (optional) The input's aria-label. @@ -1586,6 +1588,20 @@ export namespace Components { "tabIndexValue": string | number; "updateComponent": () => Promise; } + interface QuillEditor { + "bounds": HTMLElement | string; + "content": string; + "customToolbarPosition": 'top' | 'bottom'; + "debug": string; + "format": 'html' | 'text' | 'json'; + "formats": string[]; + "modules"?: string; + "placeholder": string; + "preserveWhitespace": boolean; + "readOnly": boolean; + "styles": string; + "theme": string; + } } export interface ModusAccordionItemCustomEvent extends CustomEvent { detail: T; @@ -1731,6 +1747,10 @@ export interface ModusTreeViewItemCustomEvent extends CustomEvent { detail: T; target: HTMLModusTreeViewItemElement; } +export interface QuillEditorCustomEvent extends CustomEvent { + detail: T; + target: HTMLQuillEditorElement; +} declare global { interface HTMLModusAccordionElement extends Components.ModusAccordion, HTMLStencilElement { } @@ -2416,6 +2436,12 @@ declare global { prototype: HTMLModusTabsElement; new (): HTMLModusTabsElement; }; + interface HTMLModusTextEditorElement extends Components.ModusTextEditor, HTMLStencilElement { + } + var HTMLModusTextEditorElement: { + prototype: HTMLModusTextEditorElement; + new (): HTMLModusTextEditorElement; + }; interface HTMLModusTextInputElementEventMap { "valueChange": string; } @@ -2512,6 +2538,63 @@ declare global { prototype: HTMLModusTreeViewItemElement; new (): HTMLModusTreeViewItemElement; }; + interface HTMLQuillEditorElementEventMap { + "editorInit": any; + "editorChange": | { + editor: any; + event: 'text-change'; + content: any; + text: string; + html: string; + delta: any; + oldDelta: any; + source: string; + } + | { + editor: any; + event: 'selection-change'; + range: any; + oldRange: any; + source: string; + }; + "editorContentChange": { + editor: any; + content: any; + text: string; + html: string; + delta: any; + oldDelta: any; + source: string; + }; + "editorSelectionChange": { + editor: any; + range: any; + oldRange: any; + source: string; + }; + "editorFocus": { + editor: any; + source: string; + }; + "editorBlur": { + editor: any; + source: string; + }; + } + interface HTMLQuillEditorElement extends Components.QuillEditor, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLQuillEditorElement, ev: QuillEditorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLQuillEditorElement, ev: QuillEditorCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; + } + var HTMLQuillEditorElement: { + prototype: HTMLQuillEditorElement; + new (): HTMLQuillEditorElement; + }; interface HTMLElementTagNameMap { "modus-accordion": HTMLModusAccordionElement; "modus-accordion-item": HTMLModusAccordionItemElement; @@ -2563,12 +2646,14 @@ declare global { "modus-table-row-actions-menu": HTMLModusTableRowActionsMenuElement; "modus-table-toolbar": HTMLModusTableToolbarElement; "modus-tabs": HTMLModusTabsElement; + "modus-text-editor": HTMLModusTextEditorElement; "modus-text-input": HTMLModusTextInputElement; "modus-time-picker": HTMLModusTimePickerElement; "modus-toast": HTMLModusToastElement; "modus-tooltip": HTMLModusTooltipElement; "modus-tree-view": HTMLModusTreeViewElement; "modus-tree-view-item": HTMLModusTreeViewItemElement; + "quill-editor": HTMLQuillEditorElement; } } declare namespace LocalJSX { @@ -4029,6 +4114,8 @@ declare namespace LocalJSX { */ "tabs"?: Tab[]; } + interface ModusTextEditor { + } interface ModusTextInput { /** * (optional) The input's aria-label. @@ -4330,6 +4417,61 @@ declare namespace LocalJSX { */ "tabIndexValue"?: string | number; } + interface QuillEditor { + "bounds"?: HTMLElement | string; + "content"?: string; + "customToolbarPosition"?: 'top' | 'bottom'; + "debug"?: string; + "format"?: 'html' | 'text' | 'json'; + "formats"?: string[]; + "modules"?: string; + "onEditorBlur"?: (event: QuillEditorCustomEvent<{ + editor: any; + source: string; + }>) => void; + "onEditorChange"?: (event: QuillEditorCustomEvent<| { + editor: any; + event: 'text-change'; + content: any; + text: string; + html: string; + delta: any; + oldDelta: any; + source: string; + } + | { + editor: any; + event: 'selection-change'; + range: any; + oldRange: any; + source: string; + }>) => void; + "onEditorContentChange"?: (event: QuillEditorCustomEvent<{ + editor: any; + content: any; + text: string; + html: string; + delta: any; + oldDelta: any; + source: string; + }>) => void; + "onEditorFocus"?: (event: QuillEditorCustomEvent<{ + editor: any; + source: string; + }>) => void; + "onEditorInit"?: (event: QuillEditorCustomEvent) => void; + "onEditorSelectionChange"?: (event: QuillEditorCustomEvent<{ + editor: any; + range: any; + oldRange: any; + source: string; + }>) => void; + "placeholder"?: string; + "preserveWhitespace"?: boolean; + "readOnly"?: boolean; + "styles"?: string; + "theme"?: string; + } interface IntrinsicElements { "modus-accordion": ModusAccordion; "modus-accordion-item": ModusAccordionItem; @@ -4381,12 +4523,14 @@ declare namespace LocalJSX { "modus-table-row-actions-menu": ModusTableRowActionsMenu; "modus-table-toolbar": ModusTableToolbar; "modus-tabs": ModusTabs; + "modus-text-editor": ModusTextEditor; "modus-text-input": ModusTextInput; "modus-time-picker": ModusTimePicker; "modus-toast": ModusToast; "modus-tooltip": ModusTooltip; "modus-tree-view": ModusTreeView; "modus-tree-view-item": ModusTreeViewItem; + "quill-editor": QuillEditor; } } export { LocalJSX as JSX }; @@ -4446,12 +4590,14 @@ declare module "@stencil/core" { "modus-table-row-actions-menu": LocalJSX.ModusTableRowActionsMenu & JSXBase.HTMLAttributes; "modus-table-toolbar": LocalJSX.ModusTableToolbar & JSXBase.HTMLAttributes; "modus-tabs": LocalJSX.ModusTabs & JSXBase.HTMLAttributes; + "modus-text-editor": LocalJSX.ModusTextEditor & JSXBase.HTMLAttributes; "modus-text-input": LocalJSX.ModusTextInput & JSXBase.HTMLAttributes; "modus-time-picker": LocalJSX.ModusTimePicker & JSXBase.HTMLAttributes; "modus-toast": LocalJSX.ModusToast & JSXBase.HTMLAttributes; "modus-tooltip": LocalJSX.ModusTooltip & JSXBase.HTMLAttributes; "modus-tree-view": LocalJSX.ModusTreeView & JSXBase.HTMLAttributes; "modus-tree-view-item": LocalJSX.ModusTreeViewItem & JSXBase.HTMLAttributes; + "quill-editor": LocalJSX.QuillEditor & JSXBase.HTMLAttributes; } } } diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss index c936365bb..5f2beb572 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss @@ -1,47 +1,1329 @@ -/* my-rich-text-editor.css */ -/* Adjust the size of the editor container */ -.editor-container { +.ql-container { + box-sizing: border-box; + font-family: Helvetica, Arial, sans-serif; + font-size: 13px; + height: 100%; + margin: 0; + border-radius: 0 0 4px 4px; + position: relative; +} + +.ql-container.ql-disabled .ql-tooltip { + visibility: hidden; +} + +.ql-container:not(.ql-disabled) li[data-list='checked'] > .ql-ui, +.ql-container:not(.ql-disabled) li[data-list='unchecked'] > .ql-ui { + cursor: pointer; +} + +.ql-clipboard { + left: -100000px; + height: 1px; + overflow-y: hidden; + position: absolute; + top: 50%; +} + +.ql-clipboard p { + margin: 0; + padding: 0; +} + +.ql-editor { + box-sizing: border-box; + counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + line-height: 1.42; + height: 100%; + outline: none; + overflow-y: auto; + padding: 12px 15px; + tab-size: 4; + -moz-tab-size: 4; + text-align: left; + white-space: pre-wrap; + word-wrap: break-word; +} + +.ql-editor > * { + cursor: text; +} + +.ql-editor p, +.ql-editor ol, +.ql-editor pre, +.ql-editor blockquote, +.ql-editor h1, +.ql-editor h2, +.ql-editor h3, +.ql-editor h4, +.ql-editor h5, +.ql-editor h6 { + margin: 0; + padding: 0; +} + +@supports (counter-set: none) { + .ql-editor p, + .ql-editor h1, + .ql-editor h2, + .ql-editor h3, + .ql-editor h4, + .ql-editor h5, + .ql-editor h6 { + counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor p, + .ql-editor h1, + .ql-editor h2, + .ql-editor h3, + .ql-editor h4, + .ql-editor h5, + .ql-editor h6 { + counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +.ql-editor table { + border-collapse: collapse; +} + +.ql-editor td { + border: 1px solid #000; + padding: 2px 5px; +} + +.ql-editor ol { + padding-left: 1.5em; +} + +.ql-editor li { + list-style-type: none; + padding-left: 1.5em; + position: relative; +} + +.ql-editor li > .ql-ui:before { + display: inline-block; + margin-left: -1.5em; + margin-right: 0.3em; + text-align: right; + white-space: nowrap; + width: 1.2em; +} + +.ql-editor li[data-list='checked'] > .ql-ui, +.ql-editor li[data-list='unchecked'] > .ql-ui { + color: #777; +} + +.ql-editor li[data-list='bullet'] > .ql-ui:before { + content: '\2022'; +} + +.ql-editor li[data-list='checked'] > .ql-ui:before { + content: '\2611'; +} + +.ql-editor li[data-list='unchecked'] > .ql-ui:before { + content: '\2610'; +} + +@supports (counter-set: none) { + .ql-editor li[data-list] { + counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list] { + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'] { + counter-increment: list-0; +} + +.ql-editor li[data-list='ordered'] > .ql-ui:before { + content: counter(list-0, decimal) '. '; +} + +.ql-editor li[data-list='ordered'].ql-indent-1 { + counter-increment: list-1; +} + +.ql-editor li[data-list='ordered'].ql-indent-1 > .ql-ui:before { + content: counter(list-1, lower-alpha) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-1 { + counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-1 { + counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-2 { + counter-increment: list-2; +} + +.ql-editor li[data-list='ordered'].ql-indent-2 > .ql-ui:before { + content: counter(list-2, lower-roman) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-2 { + counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-2 { + counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-3 { + counter-increment: list-3; +} + +.ql-editor li[data-list='ordered'].ql-indent-3 > .ql-ui:before { + content: counter(list-3, decimal) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-3 { + counter-set: list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-3 { + counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-4 { + counter-increment: list-4; +} + +.ql-editor li[data-list='ordered'].ql-indent-4 > .ql-ui:before { + content: counter(list-4, lower-alpha) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-4 { + counter-set: list-5 list-6 list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-4 { + counter-reset: list-5 list-6 list-7 list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-5 { + counter-increment: list-5; +} + +.ql-editor li[data-list='ordered'].ql-indent-5 > .ql-ui:before { + content: counter(list-5, lower-roman) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-5 { + counter-set: list-6 list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-5 { + counter-reset: list-6 list-7 list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-6 { + counter-increment: list-6; +} + +.ql-editor li[data-list='ordered'].ql-indent-6 > .ql-ui:before { + content: counter(list-6, decimal) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-6 { + counter-set: list-7 list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-6 { + counter-reset: list-7 list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-7 { + counter-increment: list-7; +} + +.ql-editor li[data-list='ordered'].ql-indent-7 > .ql-ui:before { + content: counter(list-7, lower-alpha) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-7 { + counter-set: list-8 list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-7 { + counter-reset: list-8 list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-8 { + counter-increment: list-8; +} + +.ql-editor li[data-list='ordered'].ql-indent-8 > .ql-ui:before { + content: counter(list-8, lower-roman) '. '; +} + +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-8 { + counter-set: list-9; + } +} + +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-8 { + counter-reset: list-9; + } +} + +.ql-editor li[data-list='ordered'].ql-indent-9 { + counter-increment: list-9; +} + +.ql-editor li[data-list='ordered'].ql-indent-9 > .ql-ui:before { + content: counter(list-9, decimal) '. '; +} + +.ql-editor .ql-indent-1:not(.ql-direction-rtl) { + padding-left: 3em; +} + +.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { + padding-left: 4.5em; +} + +.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { + padding-right: 3em; +} + +.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { + padding-right: 4.5em; +} + +.ql-editor .ql-indent-2:not(.ql-direction-rtl) { + padding-left: 6em; +} + +.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { + padding-left: 7.5em; +} + +.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { + padding-right: 6em; +} + +.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { + padding-right: 7.5em; +} + +.ql-editor .ql-indent-3:not(.ql-direction-rtl) { + padding-left: 9em; +} + +.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { + padding-left: 10.5em; +} + +.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { + padding-right: 9em; +} + +.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { + padding-right: 10.5em; +} + +.ql-editor .ql-indent-4:not(.ql-direction-rtl) { + padding-left: 12em; +} + +.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { + padding-left: 13.5em; +} + +.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { + padding-right: 12em; +} + +.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { + padding-right: 13.5em; +} + +.ql-editor .ql-indent-5:not(.ql-direction-rtl) { + padding-left: 15em; +} + +.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { + padding-left: 16.5em; +} + +.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { + padding-right: 15em; +} + +.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { + padding-right: 16.5em; +} + +.ql-editor .ql-indent-6:not(.ql-direction-rtl) { + padding-left: 18em; +} + +.ql-editor li.ql-indent-6:not(.ql-direction-rtl) { + padding-left: 19.5em; +} + +.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { + padding-right: 18em; +} + +.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { + padding-right: 19.5em; +} + +.ql-editor .ql-indent-7:not(.ql-direction-rtl) { + padding-left: 21em; +} + +.ql-editor li.ql-indent-7:not(.ql-direction-rtl) { + padding-left: 22.5em; +} + +.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { + padding-right: 21em; +} + +.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { + padding-right: 22.5em; +} + +.ql-editor .ql-indent-8:not(.ql-direction-rtl) { + padding-left: 24em; +} + +.ql-editor li.ql-indent-8:not(.ql-direction-rtl) { + padding-left: 25.5em; +} + +.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { + padding-right: 24em; +} + +.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { + padding-right: 25.5em; +} + +.ql-editor .ql-indent-9:not(.ql-direction-rtl) { + padding-left: 27em; +} + +.ql-editor li.ql-indent-9:not(.ql-direction-rtl) { + padding-left: 28.5em; +} + +.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { + padding-right: 27em; +} + +.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { + padding-right: 28.5em; +} + +.ql-editor li.ql-direction-rtl { + padding-right: 1.5em; +} + +.ql-editor li.ql-direction-rtl > .ql-ui:before { + margin-left: 0.3em; + margin-right: -1.5em; + text-align: left; +} + +.ql-editor table { + table-layout: fixed; width: 100%; - height: 300px; /* Adjust height as needed */ } -/* Adjust the size and appearance of Quill toolbar buttons and icons */ +.ql-editor table td { + outline: none; +} + +.ql-editor .ql-code-block-container { + font-family: monospace; +} + +.ql-editor .ql-video { + display: block; + max-width: 100%; +} + +.ql-editor .ql-video.ql-align-center { + margin: 0 auto; +} + +.ql-editor .ql-video.ql-align-right { + margin: 0 0 0 auto; +} + +.ql-editor .ql-bg-black { + background-color: #000; +} + +.ql-editor .ql-bg-red { + background-color: #e60000; +} + +.ql-editor .ql-bg-orange { + background-color: #f90; +} + +.ql-editor .ql-bg-yellow { + background-color: #ff0; +} + +.ql-editor .ql-bg-green { + background-color: #008a00; +} + +.ql-editor .ql-bg-blue { + background-color: #06c; +} + +.ql-editor .ql-bg-purple { + background-color: #93f; +} + +.ql-editor .ql-color-white { + color: #fff; +} + +.ql-editor .ql-color-red { + color: #e60000; +} + +.ql-editor .ql-color-orange { + color: #f90; +} + +.ql-editor .ql-color-yellow { + color: #ff0; +} + +.ql-editor .ql-color-green { + color: #008a00; +} + +.ql-editor .ql-color-blue { + color: #06c; +} + +.ql-editor .ql-color-purple { + color: #93f; +} + +.ql-editor .ql-font-serif { + font-family: + Georgia, + Times New Roman, + serif; +} + +.ql-editor .ql-font-monospace { + font-family: + Monaco, + Courier New, + monospace; +} + +.ql-editor .ql-size-small { + font-size: 0.75em; +} + +.ql-editor .ql-size-large { + font-size: 1.5em; +} + +.ql-editor .ql-size-huge { + font-size: 2.5em; +} + +.ql-editor .ql-direction-rtl { + direction: rtl; + text-align: inherit; +} + +.ql-editor .ql-align-center { + text-align: center; +} + +.ql-editor .ql-align-justify { + text-align: justify; +} + +.ql-editor .ql-align-right { + text-align: right; +} + +.ql-editor .ql-ui { + position: absolute; +} + +.ql-editor.ql-blank::before { + color: rgba(0, 0, 0, 0.6); + content: attr(data-placeholder); + font-style: italic; + left: 15px; + pointer-events: none; + position: absolute; + right: 15px; +} .ql-toolbar { + border-radius: 4px 4px 0 0; +} + +.ql-snow.ql-toolbar:after, +.ql-snow .ql-toolbar:after { + clear: both; + content: ''; + display: table; +} + +.ql-snow.ql-toolbar button, +.ql-snow .ql-toolbar button { + background: none; + border: none; + cursor: pointer; + display: inline-block; + float: left; + + height: 24px; + padding: 3px 5px; + width: 28px; +} + +.ql-snow.ql-toolbar button svg, +.ql-snow .ql-toolbar button svg { + float: left; + height: 100%; +} + +.ql-snow.ql-toolbar button:active:hover, +.ql-snow .ql-toolbar button:active:hover { + outline: none; +} + +.ql-snow.ql-toolbar input.ql-image[type='file'], +.ql-snow .ql-toolbar input.ql-image[type='file'] { + display: none; +} + +.ql-snow.ql-toolbar button:hover, +.ql-snow .ql-toolbar button:hover, +.ql-snow.ql-toolbar button:focus, +.ql-snow .ql-toolbar button:focus, +.ql-snow.ql-toolbar button.ql-active, +.ql-snow .ql-toolbar button.ql-active, +.ql-snow.ql-toolbar .ql-picker-label:hover, +.ql-snow .ql-toolbar .ql-picker-label:hover, +.ql-snow.ql-toolbar .ql-picker-label.ql-active, +.ql-snow .ql-toolbar .ql-picker-label.ql-active, +.ql-snow.ql-toolbar .ql-picker-item:hover, +.ql-snow .ql-toolbar .ql-picker-item:hover, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected { + color: #06c; +} + +.ql-snow.ql-toolbar button:hover .ql-fill, +.ql-snow .ql-toolbar button:hover .ql-fill, +.ql-snow.ql-toolbar button:focus .ql-fill, +.ql-snow .ql-toolbar button:focus .ql-fill, +.ql-snow.ql-toolbar button.ql-active .ql-fill, +.ql-snow .ql-toolbar button.ql-active .ql-fill, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, +.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, +.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, +.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, +.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, +.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, +.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { + fill: #06c; +} + +.ql-snow.ql-toolbar button:hover .ql-stroke, +.ql-snow .ql-toolbar button:hover .ql-stroke, +.ql-snow.ql-toolbar button:focus .ql-stroke, +.ql-snow .ql-toolbar button:focus .ql-stroke, +.ql-snow.ql-toolbar button.ql-active .ql-stroke, +.ql-snow .ql-toolbar button.ql-active .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, +.ql-snow.ql-toolbar button:hover .ql-stroke-miter, +.ql-snow .ql-toolbar button:hover .ql-stroke-miter, +.ql-snow.ql-toolbar button:focus .ql-stroke-miter, +.ql-snow .ql-toolbar button:focus .ql-stroke-miter, +.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, +.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { + stroke: #06c; +} + +@media (pointer: coarse) { + .ql-snow.ql-toolbar button:hover:not(.ql-active), + .ql-snow .ql-toolbar button:hover:not(.ql-active) { + color: #444; + } + + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { + fill: #444; + } + + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { + stroke: #444; + } +} + +.ql-snow { + box-sizing: border-box; +} + +.ql-snow * { + box-sizing: border-box; +} + +.ql-snow .ql-hidden { + display: none; +} + +.ql-snow .ql-out-bottom, +.ql-snow .ql-out-top { + visibility: hidden; +} + +.ql-snow .ql-tooltip { + position: absolute; + transform: translateY(10px); +} + +.ql-snow .ql-tooltip a { + cursor: pointer; + text-decoration: none; +} + +.ql-snow .ql-tooltip.ql-flip { + transform: translateY(-10px); +} + +.ql-snow .ql-formats { + display: inline-block; + vertical-align: middle; +} + +.ql-snow .ql-formats:after { + clear: both; + content: ''; + display: table; +} + +.ql-snow .ql-stroke { + fill: none; + stroke: #444; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 2; +} + +.ql-snow .ql-stroke-miter { + fill: none; + stroke: #444; + stroke-miterlimit: 10; + stroke-width: 2; +} + +.ql-snow .ql-fill, +.ql-snow .ql-stroke.ql-fill { + fill: #444; +} + +.ql-snow .ql-empty { + fill: none; +} + +.ql-snow .ql-even { + fill-rule: evenodd; +} + +.ql-snow .ql-thin, +.ql-snow .ql-stroke.ql-thin { + stroke-width: 1; +} + +.ql-snow .ql-transparent { + opacity: 0.4; +} + +.ql-snow .ql-direction svg:last-child { + display: none; +} + +.ql-snow .ql-direction.ql-active svg:last-child { + display: inline; +} + +.ql-snow .ql-direction.ql-active svg:first-child { + display: none; +} + +.ql-snow .ql-editor h1 { + font-size: 2em; +} + +.ql-snow .ql-editor h2 { + font-size: 1.5em; +} + +.ql-snow .ql-editor h3 { + font-size: 1.17em; +} + +.ql-snow .ql-editor h4 { + font-size: 1em; +} + +.ql-snow .ql-editor h5 { + font-size: 0.83em; +} + +.ql-snow .ql-editor h6 { + font-size: 0.67em; +} + +.ql-snow .ql-editor a { + text-decoration: underline; +} + +.ql-snow .ql-editor blockquote { + border-left: 4px solid #ccc; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 16px; +} + +.ql-snow .ql-editor code, +.ql-snow .ql-editor .ql-code-block-container { + background-color: #f0f0f0; + border-radius: 3px; +} + +.ql-snow .ql-editor .ql-code-block-container { + margin-bottom: 5px; + margin-top: 5px; + padding: 5px 10px; +} + +.ql-snow .ql-editor code { + font-size: 85%; + padding: 2px 4px; +} + +.ql-snow .ql-editor .ql-code-block-container { + background-color: #23241f; + color: #f8f8f2; + overflow: visible; +} + +.ql-snow .ql-editor img { + max-width: 100%; +} + +.ql-snow .ql-picker { + color: #444; + display: inline-block; + float: left; + font-size: 14px; + font-weight: 500; + height: 24px; + position: relative; + vertical-align: middle; +} + +.ql-snow .ql-picker-label { + cursor: pointer; + display: inline-block; + height: 100%; + padding-left: 8px; + padding-right: 2px; + position: relative; + width: 100%; +} + +.ql-snow .ql-picker-label::before { + display: inline-block; + line-height: 22px; +} + +.ql-snow .ql-picker-options { + background-color: #fff; + display: none; + min-width: 100%; + padding: 4px 8px; + position: absolute; + white-space: nowrap; +} + +.ql-snow .ql-picker-options .ql-picker-item { + cursor: pointer; + display: block; + padding-bottom: 5px; + padding-top: 5px; +} + +.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ccc; + z-index: 2; +} + +.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ccc; +} + +.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ccc; +} + +.ql-snow .ql-picker.ql-expanded .ql-picker-options { + display: block; + margin-top: -1px; + top: 100%; + z-index: 1; +} + +.ql-snow .ql-color-picker, +.ql-snow .ql-icon-picker { + width: 28px; +} + +.ql-snow .ql-color-picker .ql-picker-label, +.ql-snow .ql-icon-picker .ql-picker-label { + padding: 2px 4px; +} + +.ql-snow .ql-color-picker .ql-picker-label svg, +.ql-snow .ql-icon-picker .ql-picker-label svg { + right: 4px; +} + +.ql-snow .ql-icon-picker .ql-picker-options { + padding: 4px 0; +} + +.ql-snow .ql-icon-picker .ql-picker-item { + height: 24px; + width: 24px; + padding: 2px 4px; +} + +.ql-snow .ql-color-picker .ql-picker-options { + padding: 3px 5px; + width: 152px; +} + +.ql-snow .ql-color-picker .ql-picker-item { + border: 1px solid transparent; + float: left; + height: 16px; + margin: 2px; + padding: 0; + width: 16px; +} + +.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { + position: absolute; + margin-top: -9px; + right: 0; + top: 50%; + width: 18px; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { + content: attr(data-label); +} + +.ql-snow .ql-picker.ql-header { + width: 98px; +} +.ql-snow .ql-picker.ql-size .ql-picker-label::before, +.ql-snow .ql-picker.ql-size .ql-picker-item::before { + content: '14px'; +} + +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before { + content: '14px'; + font-size: 14px !important; +} +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { + content: '16px'; + font-size: 16px !important; +} +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { + content: '18px'; + font-size: 18px !important; +} +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before { + font-size: 14px !important; +} +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { + font-size: 16px !important; +} +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { + font-size: 18px !important; +} +.ql-editor .ql-size-14px { + font-size: 0.75em; +} + +.ql-editor .ql-size-16px { + font-size: 1.5em; +} + +.ql-editor .ql-size-18px { + font-size: 2.5em; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label::before, +.ql-snow .ql-picker.ql-header .ql-picker-item::before { + content: 'Normal'; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { + content: 'Heading 1'; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { + content: 'Heading 2'; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { + content: 'Heading 3'; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { + content: 'Heading 4'; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { + content: 'Heading 5'; +} + +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { + content: 'Heading 6'; +} + +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { + font-size: 2em; +} + +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { + font-size: 1.5em; +} + +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { + font-size: 1.17em; +} + +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { + font-size: 1em; +} + +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { + font-size: 0.83em; +} + +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { + font-size: 0.67em; +} + +.ql-snow .ql-picker.ql-font { + width: 108px; +} + +.ql-snow .ql-picker.ql-font .ql-picker-label::before, +.ql-snow .ql-picker.ql-font .ql-picker-item::before { + content: 'Sans Serif'; +} + +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { + content: 'Serif'; +} + +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { + content: 'Monospace'; +} + +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { + font-family: + Georgia, + Times New Roman, + serif; +} + +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { + font-family: + Monaco, + Courier New, + monospace; +} + +.ql-snow .ql-picker.ql-size { + width: 98px; +} + +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { + content: 'Small'; +} + +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { + content: 'Large'; +} + +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { + content: 'Huge'; +} + +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { + font-size: 10px; +} + +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { + font-size: 18px; +} + +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { + font-size: 32px; +} + +.ql-snow .ql-color-picker.ql-background .ql-picker-item { + background-color: #fff; +} + +.ql-snow .ql-color-picker.ql-color .ql-picker-item { + background-color: #000; +} + +.ql-code-block-container { + position: relative; +} + +.ql-code-block-container .ql-ui { + right: 5px; + top: 5px; +} + +.ql-toolbar.ql-snow { border: 1px solid #ccc; - border-radius: 4px; - background-color: #f9f9f9; + box-sizing: border-box; + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 8px; } -.ql-toolbar .ql-picker { - width: auto; - padding: 4px; +.ql-toolbar.ql-snow .ql-formats { + margin-right: 15px; } -.ql-toolbar .ql-picker-label { - padding: 2px; +.ql-toolbar.ql-snow .ql-picker-label { + border: 1px solid transparent; } -.ql-toolbar .ql-picker-options { - padding: 4px; +.ql-toolbar.ql-snow .ql-picker-options { + border: 1px solid transparent; + box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px; } -.ql-toolbar .ql-picker-item { - padding: 2px; +.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + border-color: #ccc; } -.ql-toolbar .ql-picker-label svg { - width: 16px; - height: 16px; +.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + border-color: #ccc; } -/* Adjust the size and appearance of Quill editor content */ -.ql-container { +.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, +.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { + border-color: #000; +} + +.ql-toolbar.ql-snow + .ql-container.ql-snow { + border-top: 0; +} + +.ql-snow .ql-tooltip { + background-color: #fff; border: 1px solid #ccc; - border-radius: 4px; + box-shadow: 0 0 5px #ddd; + color: #444; + padding: 5px 12px; + white-space: nowrap; } -.ql-editor { - min-height: 200px; /* Adjust min-height as needed */ - font-size: 14px; /* Adjust font size as needed */ +.ql-snow .ql-tooltip::before { + content: 'Visit URL:'; + line-height: 26px; + margin-right: 8px; +} + +.ql-snow .ql-tooltip input[type='text'] { + display: none; + border: 1px solid #ccc; + font-size: 13px; + height: 26px; + margin: 0; + padding: 3px 5px; + width: 170px; +} + +.ql-snow .ql-tooltip a.ql-preview { + display: inline-block; + max-width: 200px; + overflow-x: hidden; + text-overflow: ellipsis; + vertical-align: top; +} + +.ql-snow .ql-tooltip a.ql-action::after { + border-right: 1px solid #ccc; + content: 'Edit'; + margin-left: 16px; + padding-right: 8px; +} + +.ql-snow .ql-tooltip a.ql-remove::before { + content: 'Remove'; + margin-left: 8px; +} + +.ql-snow .ql-tooltip a { + line-height: 26px; +} + +.ql-snow .ql-tooltip.ql-editing a.ql-preview, +.ql-snow .ql-tooltip.ql-editing a.ql-remove { + display: none; +} + +.ql-snow .ql-tooltip.ql-editing input[type='text'] { + display: inline-block; +} + +.ql-snow .ql-tooltip.ql-editing a.ql-action::after { + border-right: 0; + content: 'Save'; + padding-right: 0; +} + +.ql-snow .ql-tooltip[data-mode='link']::before { + content: 'Enter link:'; +} + +.ql-snow .ql-tooltip[data-mode='formula']::before { + content: 'Enter formula:'; +} + +.ql-snow .ql-tooltip[data-mode='video']::before { + content: 'Enter video:'; +} + +.ql-snow a { + color: #06c; +} + +.ql-container.ql-snow { + border: 1px solid #ccc; } diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx index e47488759..4bbd4be16 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx @@ -1,25 +1,39 @@ import { Component, h, Element } from '@stencil/core'; import Quill from 'quill'; +//import { ModusIconMap } from '../../icons/ModusIconMap'; @Component({ tag: 'modus-text-editor', styleUrl: 'modus-text-editor.scss', shadow: true, }) -export class MyRichTextEditor { +export class ModusTextEditor { @Element() hostElement; quillInstance: Quill; + el: Element; componentDidLoad() { - // Initialize Quill editor inside the shadow DOM + // const size = Quill.import('attributors/style/size') as (typeof Quill.imports)['attributors/style/size']; + // (size as any).whitelist = ['14px', '16px', '18px']; + const editorContainer = this.hostElement.shadowRoot.querySelector('.editor-container'); this.quillInstance = new Quill(editorContainer, { + modules: { + toolbar: [ + [{ header: [false, 1, 2] }], + [{ size: ['14px', '16px', '18px'] }], + ['bold', 'italic', 'underline', 'strike'], + [{ font: ['serif', 'monospace'] }], + ['blockquote', 'code-block', 'image'], + [{ list: 'ordered' }, { list: 'bullet' }], + ], + }, theme: 'snow', // You can change the theme here }); } render() { - return
{/* This is where the Quill editor will be rendered */}
; + return
; } } diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html index 96e9059e3..96ef8c363 100644 --- a/stencil-workspace/src/index.html +++ b/stencil-workspace/src/index.html @@ -21,34 +21,6 @@

Modus Editor

- - - - - - Stencil Quill - - - - - - - - - - - - - - - - - - From a780ddd468eab55f35998aeb58cb88b640ba26a7 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Wed, 13 Mar 2024 18:27:33 +0530 Subject: [PATCH 3/8] Update toolbar --- .../components/modus-text-editor/modus-text-editor.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx index 4bbd4be16..dd89c515f 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx @@ -21,12 +21,12 @@ export class ModusTextEditor { this.quillInstance = new Quill(editorContainer, { modules: { toolbar: [ - [{ header: [false, 1, 2] }], + [{ font: ['sans', 'serif', 'monospace'] }], [{ size: ['14px', '16px', '18px'] }], ['bold', 'italic', 'underline', 'strike'], - [{ font: ['serif', 'monospace'] }], - ['blockquote', 'code-block', 'image'], - [{ list: 'ordered' }, { list: 'bullet' }], + [{ align: '' }, { align: 'center' }, { align: 'right' }], + [{ list: 'bullet' }, { list: 'ordered' }], + ['link'], ], }, theme: 'snow', // You can change the theme here From efe441bff6c3e0106b65bbbdcf66c8d4e93035f3 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Thu, 14 Mar 2024 15:45:10 +0530 Subject: [PATCH 4/8] Modify Icon Add bottom border --- .../modus-text-editor/modus-text-editor.scss | 1 + .../modus-text-editor/modus-text-editor.tsx | 25 ++++++++++--- stencil-workspace/src/utils/utils.ts | 35 +++++++++++++++++++ 3 files changed, 56 insertions(+), 5 deletions(-) diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss index 5f2beb572..b3c31bb61 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss @@ -1326,4 +1326,5 @@ .ql-container.ql-snow { border: 1px solid #ccc; + border-bottom: 1px solid #6a6e79; } diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx index dd89c515f..d0fcb2955 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx @@ -1,6 +1,7 @@ import { Component, h, Element } from '@stencil/core'; import Quill from 'quill'; -//import { ModusIconMap } from '../../icons/ModusIconMap'; +import { ModusIconMap } from '../../icons/ModusIconMap'; +import { convertIconToSVG } from '../../utils/utils'; @Component({ tag: 'modus-text-editor', @@ -14,11 +15,20 @@ export class ModusTextEditor { el: Element; componentDidLoad() { - // const size = Quill.import('attributors/style/size') as (typeof Quill.imports)['attributors/style/size']; - // (size as any).whitelist = ['14px', '16px', '18px']; - const editorContainer = this.hostElement.shadowRoot.querySelector('.editor-container'); + const icons = Quill.import('ui/icons'); + icons['bold'] = convertIconToSVG(); + icons['italic'] = convertIconToSVG(); + icons['underline'] = convertIconToSVG(); + icons['strike'] = convertIconToSVG(); + icons['align'][''] = convertIconToSVG(); + icons['align']['center'] = convertIconToSVG(); + icons['align']['right'] = convertIconToSVG(); + icons['list']['bullet'] = convertIconToSVG(); + icons['list']['ordered'] = convertIconToSVG(); + icons['link'] = convertIconToSVG(); this.quillInstance = new Quill(editorContainer, { + placeholder: 'Compose an epic...', modules: { toolbar: [ [{ font: ['sans', 'serif', 'monospace'] }], @@ -29,8 +39,13 @@ export class ModusTextEditor { ['link'], ], }, - theme: 'snow', // You can change the theme here + theme: 'snow', }); + const fontPicker = this.hostElement.shadowRoot.querySelector('.ql-font .ql-picker-label svg'); + const fontSizePicker = this.hostElement.shadowRoot.querySelector('.ql-size .ql-picker-label svg'); + console.log(icons['list']); + fontPicker.innerHTML = convertIconToSVG(); + fontSizePicker.innerHTML = convertIconToSVG(); } render() { diff --git a/stencil-workspace/src/utils/utils.ts b/stencil-workspace/src/utils/utils.ts index 3279f5f3d..d24025200 100644 --- a/stencil-workspace/src/utils/utils.ts +++ b/stencil-workspace/src/utils/utils.ts @@ -16,3 +16,38 @@ let counter = 0; export function generateElementId(): string { return `mwc_id_${counter++}`; } + +export function convertIconToSVG(iconObject) { + let svgString = ` { + svgString += ` ${key}="${iconObject['$attrs$'][key]}"`; + }); + + svgString += `>`; + + if (iconObject['$children$']) { + iconObject['$children$'].forEach((child) => { + let childString = `<${child['$tag$']}`; + + Object.keys(child['$attrs$']).forEach((key) => { + childString += ` ${key}="${child['$attrs$'][key]}"`; + }); + + if (!child['$children$']) { + childString += `/>`; + } else { + childString += `>`; + + childString += convertIconToSVG(child); + childString += ``; + } + + svgString += childString; + }); + } + + svgString += ``; + + return svgString; +} From 65a9386c518667a463538297024f22a491e26fa5 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Thu, 14 Mar 2024 19:27:44 +0530 Subject: [PATCH 5/8] Update css and font size --- .../modus-text-editor/modus-text-editor.scss | 16 +++++-- .../modus-text-editor/modus-text-editor.tsx | 46 +++++++++++++------ 2 files changed, 44 insertions(+), 18 deletions(-) diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss index b3c31bb61..afb9fbe48 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss @@ -1211,13 +1211,22 @@ border: 1px solid #ccc; box-sizing: border-box; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; - padding: 8px; + padding: 0; } -.ql-toolbar.ql-snow .ql-formats { - margin-right: 15px; +.ql-toolbar.ql-snow .ql-formats:not(:last-child) { + margin: 5px 0; + border-right: 1px solid #ccc; + padding: 2px; } +.ql-toolbar.ql-snow .ql-formats { + margin-right: 2px; + margin-left: 2px; +} +.ql-toolbar.ql-snow .ql-formats button { + padding-left: 0; +} .ql-toolbar.ql-snow .ql-picker-label { border: 1px solid transparent; } @@ -1327,4 +1336,5 @@ .ql-container.ql-snow { border: 1px solid #ccc; border-bottom: 1px solid #6a6e79; + min-height: 200px; } diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx index d0fcb2955..b6cdef4e7 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx @@ -14,25 +14,17 @@ export class ModusTextEditor { quillInstance: Quill; el: Element; + private fontSizeArr = ['14px', '16px', '18px']; + componentDidLoad() { const editorContainer = this.hostElement.shadowRoot.querySelector('.editor-container'); - const icons = Quill.import('ui/icons'); - icons['bold'] = convertIconToSVG(); - icons['italic'] = convertIconToSVG(); - icons['underline'] = convertIconToSVG(); - icons['strike'] = convertIconToSVG(); - icons['align'][''] = convertIconToSVG(); - icons['align']['center'] = convertIconToSVG(); - icons['align']['right'] = convertIconToSVG(); - icons['list']['bullet'] = convertIconToSVG(); - icons['list']['ordered'] = convertIconToSVG(); - icons['link'] = convertIconToSVG(); + this.setIcons(); + this.setFontSize(); this.quillInstance = new Quill(editorContainer, { - placeholder: 'Compose an epic...', modules: { toolbar: [ - [{ font: ['sans', 'serif', 'monospace'] }], - [{ size: ['14px', '16px', '18px'] }], + [{ font: ['serif', 'monospace'] }], + [{ size: this.fontSizeArr }], ['bold', 'italic', 'underline', 'strike'], [{ align: '' }, { align: 'center' }, { align: 'right' }], [{ list: 'bullet' }, { list: 'ordered' }], @@ -41,9 +33,33 @@ export class ModusTextEditor { }, theme: 'snow', }); + + this.setCaretIcons(); + } + setIcons() { + const icons = Quill.import('ui/icons'); + icons['bold'] = convertIconToSVG(); + icons['italic'] = convertIconToSVG(); + icons['underline'] = convertIconToSVG(); + icons['strike'] = convertIconToSVG(); + icons['align'][''] = convertIconToSVG(); + icons['align']['center'] = convertIconToSVG(); + icons['align']['right'] = convertIconToSVG(); + icons['list']['bullet'] = convertIconToSVG(); + icons['list']['ordered'] = convertIconToSVG(); + icons['link'] = convertIconToSVG(); + } + setFontSize() { + const fontSize: any = Quill.import('attributors/style/size'); + + fontSize.whitelist = this.fontSizeArr; + + Quill.register(fontSize, true); + } + setCaretIcons() { const fontPicker = this.hostElement.shadowRoot.querySelector('.ql-font .ql-picker-label svg'); const fontSizePicker = this.hostElement.shadowRoot.querySelector('.ql-size .ql-picker-label svg'); - console.log(icons['list']); + fontPicker.innerHTML = convertIconToSVG(); fontSizePicker.innerHTML = convertIconToSVG(); } From ba7852baed39262fda398ae6642075ae0640da2e Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Wed, 3 Apr 2024 15:39:55 +0530 Subject: [PATCH 6/8] Update text editor without shadow dom --- stencil-workspace/package-lock.json | 369 +++++++++++++++--- stencil-workspace/package.json | 2 +- .../modus-text-editor/modus-text-editor.scss | 81 ++-- .../modus-text-editor/modus-text-editor.tsx | 74 ++-- .../components/modus-text-editor/readme.md | 40 ++ 5 files changed, 464 insertions(+), 102 deletions(-) create mode 100644 stencil-workspace/src/components/modus-text-editor/readme.md diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json index 9cf6713dd..f28e9522c 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -12,7 +12,7 @@ "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", "@tanstack/table-core": "^8.11.6", - "quill": "^2.0.0-rc.2" + "quill": "^1.3.7" }, "devDependencies": { "@stencil/angular-output-target": "^0.8.4", @@ -2353,6 +2353,24 @@ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "dev": true }, + "node_modules/call-bind": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -2558,6 +2576,14 @@ "wrap-ansi": "^7.0.0" } }, + "node_modules/clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -2847,6 +2873,25 @@ "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==", "dev": true }, + "node_modules/deep-equal": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz", + "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==", + "dependencies": { + "is-arguments": "^1.1.1", + "is-date-object": "^1.0.5", + "is-regex": "^1.1.4", + "object-is": "^1.1.5", + "object-keys": "^1.1.1", + "regexp.prototype.flags": "^1.5.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -2862,6 +2907,38 @@ "node": ">=0.10.0" } }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/define-properties": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", + "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", + "dependencies": { + "define-data-property": "^1.0.1", + "has-property-descriptors": "^1.0.0", + "object-keys": "^1.1.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -3064,6 +3141,25 @@ "is-arrayish": "^0.2.1" } }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -3329,9 +3425,9 @@ } }, "node_modules/eventemitter3": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", - "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==" + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", + "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==" }, "node_modules/execa": { "version": "5.1.1", @@ -3380,6 +3476,11 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, + "node_modules/extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" + }, "node_modules/extract-zip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", @@ -3422,9 +3523,9 @@ "dev": true }, "node_modules/fast-diff": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", - "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", + "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==" }, "node_modules/fast-glob": { "version": "3.3.1", @@ -3649,7 +3750,14 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/functions-have-names": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", + "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3672,6 +3780,24 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/get-intrinsic": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/get-package-type": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", @@ -3804,6 +3930,17 @@ "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", "dev": true }, + "node_modules/gopd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", + "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", + "dependencies": { + "get-intrinsic": "^1.1.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", @@ -3834,11 +3971,57 @@ "node": ">=8" } }, + "node_modules/has-property-descriptors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", + "dependencies": { + "es-define-property": "^1.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-proto": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/hasown": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", - "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -4089,6 +4272,21 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, + "node_modules/is-arguments": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", + "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -4107,6 +4305,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-date-object": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", + "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", + "dependencies": { + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -4188,6 +4400,21 @@ "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", "dev": true }, + "node_modules/is-regex": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", + "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", + "dependencies": { + "call-bind": "^1.0.2", + "has-tostringtag": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -5112,21 +5339,6 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, - "node_modules/lodash-es": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", - "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" - }, - "node_modules/lodash.clonedeep": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", - "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==" - }, - "node_modules/lodash.isequal": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", - "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==" - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -5496,6 +5708,29 @@ "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", "dev": true }, + "node_modules/object-is": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", + "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", + "dependencies": { + "call-bind": "^1.0.7", + "define-properties": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/object-keys": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", + "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -5577,9 +5812,9 @@ } }, "node_modules/parchment": { - "version": "3.0.0-alpha.2", - "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0-alpha.2.tgz", - "integrity": "sha512-r/DoIj7e8efiTWUg+BHUlolpdE9/iNVtcFg8i7SvdlF7a7fgTAAwcXrpamNrf49IsGykyDcsfUZKGFVwMXZcyg==" + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", + "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==" }, "node_modules/parent-module": { "version": "1.0.1", @@ -6099,30 +6334,29 @@ } }, "node_modules/quill": { - "version": "2.0.0-rc.2", - "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.0-rc.2.tgz", - "integrity": "sha512-3uh7uZqXpN4t0HmHCjBHXSaeSgYNij6LP1t8ncEjr6+JMq5zR6svpH5Frx7Lxmxv1DUHYDE28eV7R3f4r8Z2Kw==", + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", + "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", "dependencies": { - "eventemitter3": "^5.0.1", - "lodash-es": "^4.17.21", - "parchment": "^3.0.0-alpha.2", - "quill-delta": "^5.1.0" - }, - "engines": { - "npm": ">=8.2.3" + "clone": "^2.1.1", + "deep-equal": "^1.0.1", + "eventemitter3": "^2.0.3", + "extend": "^3.0.2", + "parchment": "^1.1.4", + "quill-delta": "^3.6.2" } }, "node_modules/quill-delta": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", - "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", + "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", "dependencies": { - "fast-diff": "^1.3.0", - "lodash.clonedeep": "^4.5.0", - "lodash.isequal": "^4.5.0" + "deep-equal": "^1.0.1", + "extend": "^3.0.2", + "fast-diff": "1.1.2" }, "engines": { - "node": ">= 12.0.0" + "node": ">=0.10" } }, "node_modules/react-is": { @@ -6220,6 +6454,23 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/regexp.prototype.flags": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", + "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==", + "dependencies": { + "call-bind": "^1.0.6", + "define-properties": "^1.2.1", + "es-errors": "^1.3.0", + "set-function-name": "^2.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -6428,6 +6679,36 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/set-function-name": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz", + "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==", + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "functions-have-names": "^1.2.3", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json index 1ce5e627f..a09337465 100644 --- a/stencil-workspace/package.json +++ b/stencil-workspace/package.json @@ -43,7 +43,7 @@ "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", "@tanstack/table-core": "^8.11.6", - "quill": "^2.0.0-rc.2" + "quill": "^1.3.7" }, "devDependencies": { "@stencil/angular-output-target": "^0.8.4", diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss index afb9fbe48..97ee3659b 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss @@ -1,10 +1,10 @@ .ql-container { + border-radius: 0 0 4px 4px; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 13px; height: 100%; margin: 0; - border-radius: 0 0 4px 4px; position: relative; } @@ -18,8 +18,8 @@ } .ql-clipboard { - left: -100000px; height: 1px; + left: -100000px; overflow-y: hidden; position: absolute; top: 50%; @@ -33,13 +33,13 @@ .ql-editor { box-sizing: border-box; counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; - line-height: 1.42; height: 100%; + line-height: 1.42; outline: none; overflow-y: auto; padding: 12px 15px; - tab-size: 4; -moz-tab-size: 4; + tab-size: 4; text-align: left; white-space: pre-wrap; word-wrap: break-word; @@ -97,16 +97,20 @@ } .ql-editor ol { + list-style-type: decimal; padding-left: 1.5em; } +.ql-editor ul { + list-style-type: initial; +} + .ql-editor li { - list-style-type: none; padding-left: 1.5em; position: relative; } -.ql-editor li > .ql-ui:before { +.ql-editor li > .ql-ui::before { display: inline-block; margin-left: -1.5em; margin-right: 0.3em; @@ -120,15 +124,15 @@ color: #777; } -.ql-editor li[data-list='bullet'] > .ql-ui:before { +.ql-editor li[data-list='bullet'] > .ql-ui::before { content: '\2022'; } -.ql-editor li[data-list='checked'] > .ql-ui:before { +.ql-editor li[data-list='checked'] > .ql-ui::before { content: '\2611'; } -.ql-editor li[data-list='unchecked'] > .ql-ui:before { +.ql-editor li[data-list='unchecked'] > .ql-ui::before { content: '\2610'; } @@ -148,7 +152,7 @@ counter-increment: list-0; } -.ql-editor li[data-list='ordered'] > .ql-ui:before { +.ql-editor li[data-list='ordered'] > .ql-ui::before { content: counter(list-0, decimal) '. '; } @@ -156,7 +160,7 @@ counter-increment: list-1; } -.ql-editor li[data-list='ordered'].ql-indent-1 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-1 > .ql-ui::before { content: counter(list-1, lower-alpha) '. '; } @@ -176,7 +180,7 @@ counter-increment: list-2; } -.ql-editor li[data-list='ordered'].ql-indent-2 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-2 > .ql-ui::before { content: counter(list-2, lower-roman) '. '; } @@ -196,7 +200,7 @@ counter-increment: list-3; } -.ql-editor li[data-list='ordered'].ql-indent-3 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-3 > .ql-ui::before { content: counter(list-3, decimal) '. '; } @@ -216,7 +220,7 @@ counter-increment: list-4; } -.ql-editor li[data-list='ordered'].ql-indent-4 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-4 > .ql-ui::before { content: counter(list-4, lower-alpha) '. '; } @@ -236,7 +240,7 @@ counter-increment: list-5; } -.ql-editor li[data-list='ordered'].ql-indent-5 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-5 > .ql-ui::before { content: counter(list-5, lower-roman) '. '; } @@ -256,7 +260,7 @@ counter-increment: list-6; } -.ql-editor li[data-list='ordered'].ql-indent-6 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-6 > .ql-ui::before { content: counter(list-6, decimal) '. '; } @@ -276,7 +280,7 @@ counter-increment: list-7; } -.ql-editor li[data-list='ordered'].ql-indent-7 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-7 > .ql-ui::before { content: counter(list-7, lower-alpha) '. '; } @@ -296,7 +300,7 @@ counter-increment: list-8; } -.ql-editor li[data-list='ordered'].ql-indent-8 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-8 > .ql-ui::before { content: counter(list-8, lower-roman) '. '; } @@ -316,7 +320,7 @@ counter-increment: list-9; } -.ql-editor li[data-list='ordered'].ql-indent-9 > .ql-ui:before { +.ql-editor li[data-list='ordered'].ql-indent-9 > .ql-ui::before { content: counter(list-9, decimal) '. '; } @@ -468,7 +472,7 @@ padding-right: 1.5em; } -.ql-editor li.ql-direction-rtl > .ql-ui:before { +.ql-editor li.ql-direction-rtl > .ql-ui::before { margin-left: 0.3em; margin-right: -1.5em; text-align: left; @@ -559,14 +563,14 @@ .ql-editor .ql-font-serif { font-family: Georgia, - Times New Roman, + "Times New Roman", serif; } .ql-editor .ql-font-monospace { font-family: Monaco, - Courier New, + "Courier New", monospace; } @@ -612,12 +616,13 @@ position: absolute; right: 15px; } + .ql-toolbar { border-radius: 4px 4px 0 0; } -.ql-snow.ql-toolbar:after, -.ql-snow .ql-toolbar:after { +.ql-snow.ql-toolbar::after, +.ql-snow .ql-toolbar::after { clear: both; content: ''; display: table; @@ -630,7 +635,6 @@ cursor: pointer; display: inline-block; float: left; - height: 24px; padding: 3px 5px; width: 28px; @@ -788,7 +792,7 @@ vertical-align: middle; } -.ql-snow .ql-formats:after { +.ql-snow .ql-formats::after { clear: both; content: ''; display: table; @@ -988,8 +992,8 @@ .ql-snow .ql-icon-picker .ql-picker-item { height: 24px; - width: 24px; padding: 2px 4px; + width: 24px; } .ql-snow .ql-color-picker .ql-picker-options { @@ -1007,8 +1011,8 @@ } .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { - position: absolute; margin-top: -9px; + position: absolute; right: 0; top: 50%; width: 18px; @@ -1026,6 +1030,7 @@ .ql-snow .ql-picker.ql-header { width: 98px; } + .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '14px'; @@ -1036,25 +1041,31 @@ content: '14px'; font-size: 14px !important; } + .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { content: '16px'; font-size: 16px !important; } + .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { content: '18px'; font-size: 18px !important; } + .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before { font-size: 14px !important; } + .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { font-size: 16px !important; } + .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { font-size: 18px !important; } + .ql-editor .ql-size-14px { font-size: 0.75em; } @@ -1148,14 +1159,14 @@ .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { font-family: Georgia, - Times New Roman, + "Times New Roman", serif; } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { font-family: Monaco, - Courier New, + "Courier New", monospace; } @@ -1210,23 +1221,25 @@ .ql-toolbar.ql-snow { border: 1px solid #ccc; box-sizing: border-box; - font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 0; } .ql-toolbar.ql-snow .ql-formats:not(:last-child) { - margin: 5px 0; border-right: 1px solid #ccc; + margin: 5px 0; padding: 2px; } .ql-toolbar.ql-snow .ql-formats { - margin-right: 2px; margin-left: 2px; + margin-right: 2px; } + .ql-toolbar.ql-snow .ql-formats button { padding-left: 0; } + .ql-toolbar.ql-snow .ql-picker-label { border: 1px solid transparent; } @@ -1269,8 +1282,8 @@ } .ql-snow .ql-tooltip input[type='text'] { - display: none; border: 1px solid #ccc; + display: none; font-size: 13px; height: 26px; margin: 0; diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx index b6cdef4e7..d4f21fc05 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx @@ -6,7 +6,6 @@ import { convertIconToSVG } from '../../utils/utils'; @Component({ tag: 'modus-text-editor', styleUrl: 'modus-text-editor.scss', - shadow: true, }) export class ModusTextEditor { @Element() hostElement; @@ -16,26 +15,6 @@ export class ModusTextEditor { private fontSizeArr = ['14px', '16px', '18px']; - componentDidLoad() { - const editorContainer = this.hostElement.shadowRoot.querySelector('.editor-container'); - this.setIcons(); - this.setFontSize(); - this.quillInstance = new Quill(editorContainer, { - modules: { - toolbar: [ - [{ font: ['serif', 'monospace'] }], - [{ size: this.fontSizeArr }], - ['bold', 'italic', 'underline', 'strike'], - [{ align: '' }, { align: 'center' }, { align: 'right' }], - [{ list: 'bullet' }, { list: 'ordered' }], - ['link'], - ], - }, - theme: 'snow', - }); - - this.setCaretIcons(); - } setIcons() { const icons = Quill.import('ui/icons'); icons['bold'] = convertIconToSVG(); @@ -49,6 +28,7 @@ export class ModusTextEditor { icons['list']['ordered'] = convertIconToSVG(); icons['link'] = convertIconToSVG(); } + setFontSize() { const fontSize: any = Quill.import('attributors/style/size'); @@ -56,14 +36,62 @@ export class ModusTextEditor { Quill.register(fontSize, true); } + setCaretIcons() { - const fontPicker = this.hostElement.shadowRoot.querySelector('.ql-font .ql-picker-label svg'); - const fontSizePicker = this.hostElement.shadowRoot.querySelector('.ql-size .ql-picker-label svg'); + const fontPicker = this.hostElement.querySelector('.ql-font .ql-picker-label svg'); + const fontSizePicker = this.hostElement.querySelector('.ql-size .ql-picker-label svg'); fontPicker.innerHTML = convertIconToSVG(); fontSizePicker.innerHTML = convertIconToSVG(); } + componentDidRender() { + if (!this.quillInstance) { + this.initializeQuillEditor(); + } + } + + initializeQuillEditor() { + const editorContainer = this.hostElement.querySelector('.editor-container'); + + this.setIcons(); + this.setFontSize(); + const toolbarOptions = { + container: [ + [{ font: ['serif', 'monospace'] }], + [{ size: this.fontSizeArr }], + ['bold', 'italic', 'underline', 'strike'], + [{ align: '' }, { align: 'center' }, { align: 'right' }], + [{ list: 'bullet' }, { list: 'ordered' }], + ['link'], + ], + handlers: { + link: function (value) { + console.log(value); + if (value) { + const href = prompt('Enter the URL'); + + console.log('quill', this.quill.format('link', href)); + this.quill.format('link', true); + } else { + this.quill.format('link', false); + } + }, + }, + }; + + if (editorContainer) { + this.quillInstance = new Quill(editorContainer, { + modules: { + toolbar: toolbarOptions, + }, + theme: 'snow', + }); + } + + this.setCaretIcons(); + } + render() { return
; } diff --git a/stencil-workspace/src/components/modus-text-editor/readme.md b/stencil-workspace/src/components/modus-text-editor/readme.md new file mode 100644 index 000000000..823db5c32 --- /dev/null +++ b/stencil-workspace/src/components/modus-text-editor/readme.md @@ -0,0 +1,40 @@ +# quill-editor + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ----------------------- | ------------------------- | ----------- | ---------------------------- | ------------------------ | +| `bounds` | `bounds` | | `HTMLElement \| string` | `undefined` | +| `content` | `content` | | `string` | `undefined` | +| `customToolbarPosition` | `custom-toolbar-position` | | `"bottom" \| "top"` | `'top'` | +| `debug` | `debug` | | `string` | `'warn'` | +| `format` | `format` | | `"html" \| "json" \| "text"` | `'html'` | +| `formats` | -- | | `string[]` | `undefined` | +| `modules` | `modules` | | `string` | `undefined` | +| `placeholder` | `placeholder` | | `string` | `'Insert text here ...'` | +| `preserveWhitespace` | `preserve-whitespace` | | `boolean` | `false` | +| `readOnly` | `read-only` | | `boolean` | `undefined` | +| `styles` | `styles` | | `string` | `'{}'` | +| `theme` | `theme` | | `string` | `'snow'` | + + +## Events + +| Event | Description | Type | +| ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `editorBlur` | | `CustomEvent<{ editor: any; source: string; }>` | +| `editorChange` | | `CustomEvent<{ editor: any; event: "selection-change"; range: any; oldRange: any; source: string; } \| { editor: any; event: "text-change"; content: any; text: string; html: string; delta: any; oldDelta: any; source: string; }>` | +| `editorContentChange` | | `CustomEvent<{ editor: any; content: any; text: string; html: string; delta: any; oldDelta: any; source: string; }>` | +| `editorFocus` | | `CustomEvent<{ editor: any; source: string; }>` | +| `editorInit` | | `CustomEvent` | +| `editorSelectionChange` | | `CustomEvent<{ editor: any; range: any; oldRange: any; source: string; }>` | + + +---------------------------------------------- + + From c05849421587fa7fa1da0bbcbce8b84709159218 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Wed, 3 Apr 2024 17:17:08 +0530 Subject: [PATCH 7/8] format code --- .../modus-text-editor/modus-text-editor.scss | 55 +++++-------------- 1 file changed, 14 insertions(+), 41 deletions(-) diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss index 97ee3659b..da6baf145 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss @@ -87,10 +87,6 @@ } } -.ql-editor table { - border-collapse: collapse; -} - .ql-editor td { border: 1px solid #000; padding: 2px 5px; @@ -479,6 +475,7 @@ } .ql-editor table { + border-collapse: collapse; table-layout: fixed; width: 100%; } @@ -561,17 +558,11 @@ } .ql-editor .ql-font-serif { - font-family: - Georgia, - "Times New Roman", - serif; + font-family: Georgia, 'Times New Roman', serif; } .ql-editor .ql-font-monospace { - font-family: - Monaco, - "Courier New", - monospace; + font-family: Monaco, 'Courier New', monospace; } .ql-editor .ql-size-small { @@ -773,13 +764,9 @@ visibility: hidden; } -.ql-snow .ql-tooltip { - position: absolute; - transform: translateY(10px); -} - .ql-snow .ql-tooltip a { cursor: pointer; + line-height: 26px; text-decoration: none; } @@ -882,27 +869,21 @@ padding-left: 16px; } -.ql-snow .ql-editor code, -.ql-snow .ql-editor .ql-code-block-container { +.ql-snow .ql-editor code { background-color: #f0f0f0; border-radius: 3px; -} - -.ql-snow .ql-editor .ql-code-block-container { - margin-bottom: 5px; - margin-top: 5px; - padding: 5px 10px; -} - -.ql-snow .ql-editor code { font-size: 85%; padding: 2px 4px; } .ql-snow .ql-editor .ql-code-block-container { - background-color: #23241f; + background-color: #f0f0f0; + border-radius: 3px; color: #f8f8f2; + margin-bottom: 5px; + margin-top: 5px; overflow: visible; + padding: 5px 10px; } .ql-snow .ql-editor img { @@ -1157,17 +1138,11 @@ } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { - font-family: - Georgia, - "Times New Roman", - serif; + font-family: Georgia, 'Times New Roman', serif; } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { - font-family: - Monaco, - "Courier New", - monospace; + font-family: Monaco, 'Courier New', monospace; } .ql-snow .ql-picker.ql-size { @@ -1272,6 +1247,8 @@ box-shadow: 0 0 5px #ddd; color: #444; padding: 5px 12px; + position: absolute; + transform: translateY(10px); white-space: nowrap; } @@ -1311,10 +1288,6 @@ margin-left: 8px; } -.ql-snow .ql-tooltip a { - line-height: 26px; -} - .ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove { display: none; From 5d9e36af142c63a1b1b17830cb77927c527c6da8 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Wed, 23 Oct 2024 12:28:44 +0530 Subject: [PATCH 8/8] changes so far --- stencil-workspace/package-lock.json | 377 +++------------- stencil-workspace/package.json | 2 +- .../modus-text-editor/modus-text-editor.scss | 401 ++++-------------- .../modus-text-editor/modus-text-editor.tsx | 75 +++- stencil-workspace/src/index.html | 21 +- .../modus-text-editor-storybook-docs.mdx | 35 ++ 6 files changed, 236 insertions(+), 675 deletions(-) create mode 100644 stencil-workspace/storybook/stories/components/modus-text-editor/modus-text-editor-storybook-docs.mdx diff --git a/stencil-workspace/package-lock.json b/stencil-workspace/package-lock.json index 4e6a895d5..c2f4512cc 100644 --- a/stencil-workspace/package-lock.json +++ b/stencil-workspace/package-lock.json @@ -12,7 +12,7 @@ "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", "@tanstack/table-core": "^8.20.5", - "quill": "^1.3.7" + "quill": "^2.0.2" }, "devDependencies": { "@stencil/angular-output-target": "^0.9.0", @@ -2353,24 +2353,6 @@ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "dev": true }, - "node_modules/call-bind": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", - "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", - "dependencies": { - "es-define-property": "^1.0.0", - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.4", - "set-function-length": "^1.2.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -2576,14 +2558,6 @@ "wrap-ansi": "^7.0.0" } }, - "node_modules/clone": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", - "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", - "engines": { - "node": ">=0.8" - } - }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -2873,25 +2847,6 @@ "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==", "dev": true }, - "node_modules/deep-equal": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz", - "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==", - "dependencies": { - "is-arguments": "^1.1.1", - "is-date-object": "^1.0.5", - "is-regex": "^1.1.4", - "object-is": "^1.1.5", - "object-keys": "^1.1.1", - "regexp.prototype.flags": "^1.5.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/deep-is": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", @@ -2907,38 +2862,6 @@ "node": ">=0.10.0" } }, - "node_modules/define-data-property": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", - "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", - "dependencies": { - "es-define-property": "^1.0.0", - "es-errors": "^1.3.0", - "gopd": "^1.0.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/define-properties": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", - "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", - "dependencies": { - "define-data-property": "^1.0.1", - "has-property-descriptors": "^1.0.0", - "object-keys": "^1.1.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -3141,25 +3064,6 @@ "is-arrayish": "^0.2.1" } }, - "node_modules/es-define-property": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", - "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", - "dependencies": { - "get-intrinsic": "^1.2.4" - }, - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/es-errors": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", - "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", - "engines": { - "node": ">= 0.4" - } - }, "node_modules/escalade": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz", @@ -3425,9 +3329,10 @@ } }, "node_modules/eventemitter3": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz", - "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg==" + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "license": "MIT" }, "node_modules/execa": { "version": "5.1.1", @@ -3476,11 +3381,6 @@ "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" } }, - "node_modules/extend": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" - }, "node_modules/extract-zip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", @@ -3523,9 +3423,10 @@ "dev": true }, "node_modules/fast-diff": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz", - "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==" + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "license": "Apache-2.0" }, "node_modules/fast-glob": { "version": "3.3.1", @@ -3750,14 +3651,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/functions-have-names": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz", - "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==", + "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -3780,24 +3674,6 @@ "node": "6.* || 8.* || >= 10.*" } }, - "node_modules/get-intrinsic": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", - "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", - "dependencies": { - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", - "has-proto": "^1.0.1", - "has-symbols": "^1.0.3", - "hasown": "^2.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/get-package-type": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz", @@ -3930,17 +3806,6 @@ "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==", "dev": true }, - "node_modules/gopd": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", - "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", - "dependencies": { - "get-intrinsic": "^1.1.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/graceful-fs": { "version": "4.2.11", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", @@ -3971,57 +3836,11 @@ "node": ">=8" } }, - "node_modules/has-property-descriptors": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", - "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", - "dependencies": { - "es-define-property": "^1.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-proto": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", - "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-symbols": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", - "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-tostringtag": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", - "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", - "dependencies": { - "has-symbols": "^1.0.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/hasown": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "dev": true, "dependencies": { "function-bind": "^1.1.2" }, @@ -4272,21 +4091,6 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, - "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -4305,20 +4109,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-date-object": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", - "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", - "dependencies": { - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", @@ -4400,21 +4190,6 @@ "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==", "dev": true }, - "node_modules/is-regex": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", - "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -5339,6 +5114,24 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", + "license": "MIT" + }, + "node_modules/lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==", + "license": "MIT" + }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -5708,29 +5501,6 @@ "integrity": "sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==", "dev": true }, - "node_modules/object-is": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz", - "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==", - "dependencies": { - "call-bind": "^1.0.7", - "define-properties": "^1.2.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/object-keys": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", - "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", - "engines": { - "node": ">= 0.4" - } - }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -5812,9 +5582,10 @@ } }, "node_modules/parchment": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz", - "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz", + "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==", + "license": "BSD-3-Clause" }, "node_modules/parent-module": { "version": "1.0.1", @@ -6334,29 +6105,32 @@ } }, "node_modules/quill": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz", - "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.2.tgz", + "integrity": "sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==", + "license": "BSD-3-Clause", "dependencies": { - "clone": "^2.1.1", - "deep-equal": "^1.0.1", - "eventemitter3": "^2.0.3", - "extend": "^3.0.2", - "parchment": "^1.1.4", - "quill-delta": "^3.6.2" + "eventemitter3": "^5.0.1", + "lodash-es": "^4.17.21", + "parchment": "^3.0.0", + "quill-delta": "^5.1.0" + }, + "engines": { + "npm": ">=8.2.3" } }, "node_modules/quill-delta": { - "version": "3.6.3", - "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz", - "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz", + "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==", + "license": "MIT", "dependencies": { - "deep-equal": "^1.0.1", - "extend": "^3.0.2", - "fast-diff": "1.1.2" + "fast-diff": "^1.3.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isequal": "^4.5.0" }, "engines": { - "node": ">=0.10" + "node": ">= 12.0.0" } }, "node_modules/react-is": { @@ -6454,23 +6228,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/regexp.prototype.flags": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz", - "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==", - "dependencies": { - "call-bind": "^1.0.6", - "define-properties": "^1.2.1", - "es-errors": "^1.3.0", - "set-function-name": "^2.0.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -6679,36 +6436,6 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, - "node_modules/set-function-length": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", - "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", - "dependencies": { - "define-data-property": "^1.1.4", - "es-errors": "^1.3.0", - "function-bind": "^1.1.2", - "get-intrinsic": "^1.2.4", - "gopd": "^1.0.1", - "has-property-descriptors": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/set-function-name": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz", - "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==", - "dependencies": { - "define-data-property": "^1.1.4", - "es-errors": "^1.3.0", - "functions-have-names": "^1.2.3", - "has-property-descriptors": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - } - }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/stencil-workspace/package.json b/stencil-workspace/package.json index e6ec53605..33c58011c 100644 --- a/stencil-workspace/package.json +++ b/stencil-workspace/package.json @@ -44,7 +44,7 @@ "@popperjs/core": "^2.11.8", "@stencil/core": "^4.12.4", "@tanstack/table-core": "^8.20.5", - "quill": "^1.3.7" + "quill": "^2.0.2" }, "devDependencies": { "@stencil/angular-output-target": "^0.9.0", diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss index da6baf145..d633aca17 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.scss @@ -1,54 +1,53 @@ .ql-container { border-radius: 0 0 4px 4px; - box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; font-size: 13px; height: 100%; + min-height: 200px; margin: 0; position: relative; } +.ql-container.disabled { + opacity: 50%; +} + .ql-container.ql-disabled .ql-tooltip { visibility: hidden; } - .ql-container:not(.ql-disabled) li[data-list='checked'] > .ql-ui, .ql-container:not(.ql-disabled) li[data-list='unchecked'] > .ql-ui { cursor: pointer; } - .ql-clipboard { - height: 1px; left: -100000px; + height: 1px; overflow-y: hidden; position: absolute; top: 50%; } - .ql-clipboard p { margin: 0; padding: 0; } - .ql-editor { box-sizing: border-box; + min-height: 200px; counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; - height: 100%; line-height: 1.42; + height: 100%; outline: none; overflow-y: auto; padding: 12px 15px; - -moz-tab-size: 4; tab-size: 4; + -moz-tab-size: 4; text-align: left; white-space: pre-wrap; word-wrap: break-word; } - .ql-editor > * { cursor: text; } - .ql-editor p, .ql-editor ol, .ql-editor pre, @@ -62,7 +61,6 @@ margin: 0; padding: 0; } - @supports (counter-set: none) { .ql-editor p, .ql-editor h1, @@ -74,7 +72,6 @@ counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor p, .ql-editor h1, @@ -86,27 +83,22 @@ counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - +.ql-editor table { + border-collapse: collapse; +} .ql-editor td { border: 1px solid #000; padding: 2px 5px; } - .ql-editor ol { - list-style-type: decimal; padding-left: 1.5em; } - -.ql-editor ul { - list-style-type: initial; -} - .ql-editor li { + list-style-type: none; padding-left: 1.5em; position: relative; } - -.ql-editor li > .ql-ui::before { +.ql-editor li > .ql-ui:before { display: inline-block; margin-left: -1.5em; margin-right: 0.3em; @@ -114,490 +106,384 @@ white-space: nowrap; width: 1.2em; } - .ql-editor li[data-list='checked'] > .ql-ui, .ql-editor li[data-list='unchecked'] > .ql-ui { color: #777; } - -.ql-editor li[data-list='bullet'] > .ql-ui::before { +.ql-editor li[data-list='bullet'] > .ql-ui:before { content: '\2022'; } - -.ql-editor li[data-list='checked'] > .ql-ui::before { +.ql-editor li[data-list='checked'] > .ql-ui:before { content: '\2611'; } - -.ql-editor li[data-list='unchecked'] > .ql-ui::before { +.ql-editor li[data-list='unchecked'] > .ql-ui:before { content: '\2610'; } - @supports (counter-set: none) { .ql-editor li[data-list] { counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list] { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - .ql-editor li[data-list='ordered'] { counter-increment: list-0; } - -.ql-editor li[data-list='ordered'] > .ql-ui::before { +.ql-editor li[data-list='ordered'] > .ql-ui:before { content: counter(list-0, decimal) '. '; } - .ql-editor li[data-list='ordered'].ql-indent-1 { counter-increment: list-1; } - -.ql-editor li[data-list='ordered'].ql-indent-1 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-1 > .ql-ui:before { content: counter(list-1, lower-alpha) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-1 { counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-2 { counter-increment: list-2; } - -.ql-editor li[data-list='ordered'].ql-indent-2 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-2 > .ql-ui:before { content: counter(list-2, lower-roman) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-2 { counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-3 { counter-increment: list-3; } - -.ql-editor li[data-list='ordered'].ql-indent-3 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-3 > .ql-ui:before { content: counter(list-3, decimal) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-3 { counter-set: list-4 list-5 list-6 list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-4 { counter-increment: list-4; } - -.ql-editor li[data-list='ordered'].ql-indent-4 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-4 > .ql-ui:before { content: counter(list-4, lower-alpha) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-4 { counter-set: list-5 list-6 list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-5 { counter-increment: list-5; } - -.ql-editor li[data-list='ordered'].ql-indent-5 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-5 > .ql-ui:before { content: counter(list-5, lower-roman) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-5 { counter-set: list-6 list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-5 { counter-reset: list-6 list-7 list-8 list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-6 { counter-increment: list-6; } - -.ql-editor li[data-list='ordered'].ql-indent-6 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-6 > .ql-ui:before { content: counter(list-6, decimal) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-6 { counter-set: list-7 list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-6 { counter-reset: list-7 list-8 list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-7 { counter-increment: list-7; } - -.ql-editor li[data-list='ordered'].ql-indent-7 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-7 > .ql-ui:before { content: counter(list-7, lower-alpha) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-7 { counter-set: list-8 list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-7 { counter-reset: list-8 list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-8 { counter-increment: list-8; } - -.ql-editor li[data-list='ordered'].ql-indent-8 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-8 > .ql-ui:before { content: counter(list-8, lower-roman) '. '; } - @supports (counter-set: none) { .ql-editor li[data-list].ql-indent-8 { counter-set: list-9; } } - @supports not (counter-set: none) { .ql-editor li[data-list].ql-indent-8 { counter-reset: list-9; } } - .ql-editor li[data-list='ordered'].ql-indent-9 { counter-increment: list-9; } - -.ql-editor li[data-list='ordered'].ql-indent-9 > .ql-ui::before { +.ql-editor li[data-list='ordered'].ql-indent-9 > .ql-ui:before { content: counter(list-9, decimal) '. '; } - .ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; } - .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; } - .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 3em; } - .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { padding-right: 4.5em; } - .ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; } - .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; } - .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 6em; } - .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { padding-right: 7.5em; } - .ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; } - .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; } - .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 9em; } - .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { padding-right: 10.5em; } - .ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; } - .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; } - .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 12em; } - .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { padding-right: 13.5em; } - .ql-editor .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; } - .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; } - .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 15em; } - .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { padding-right: 16.5em; } - .ql-editor .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; } - .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; } - .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 18em; } - .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { padding-right: 19.5em; } - .ql-editor .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; } - .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; } - .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 21em; } - .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { padding-right: 22.5em; } - .ql-editor .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; } - .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; } - .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 24em; } - .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { padding-right: 25.5em; } - .ql-editor .ql-indent-9:not(.ql-direction-rtl) { padding-left: 27em; } - .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { padding-left: 28.5em; } - .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 27em; } - .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { padding-right: 28.5em; } - .ql-editor li.ql-direction-rtl { padding-right: 1.5em; } - -.ql-editor li.ql-direction-rtl > .ql-ui::before { +.ql-editor li.ql-direction-rtl > .ql-ui:before { margin-left: 0.3em; margin-right: -1.5em; text-align: left; } - .ql-editor table { - border-collapse: collapse; table-layout: fixed; width: 100%; } - .ql-editor table td { outline: none; } - .ql-editor .ql-code-block-container { font-family: monospace; } - .ql-editor .ql-video { display: block; max-width: 100%; } - .ql-editor .ql-video.ql-align-center { margin: 0 auto; } - .ql-editor .ql-video.ql-align-right { margin: 0 0 0 auto; } - .ql-editor .ql-bg-black { background-color: #000; } - .ql-editor .ql-bg-red { background-color: #e60000; } - .ql-editor .ql-bg-orange { background-color: #f90; } - .ql-editor .ql-bg-yellow { background-color: #ff0; } - .ql-editor .ql-bg-green { background-color: #008a00; } - .ql-editor .ql-bg-blue { background-color: #06c; } - .ql-editor .ql-bg-purple { background-color: #93f; } - .ql-editor .ql-color-white { color: #fff; } - .ql-editor .ql-color-red { color: #e60000; } - .ql-editor .ql-color-orange { color: #f90; } - .ql-editor .ql-color-yellow { color: #ff0; } - .ql-editor .ql-color-green { color: #008a00; } - .ql-editor .ql-color-blue { color: #06c; } - .ql-editor .ql-color-purple { color: #93f; } - .ql-editor .ql-font-serif { - font-family: Georgia, 'Times New Roman', serif; + font-family: + Georgia, + Times New Roman, + serif; } - .ql-editor .ql-font-monospace { - font-family: Monaco, 'Courier New', monospace; + font-family: + Monaco, + Courier New, + monospace; } - .ql-editor .ql-size-small { font-size: 0.75em; } - .ql-editor .ql-size-large { font-size: 1.5em; } - .ql-editor .ql-size-huge { font-size: 2.5em; } - .ql-editor .ql-direction-rtl { direction: rtl; text-align: inherit; } - .ql-editor .ql-align-center { text-align: center; } - .ql-editor .ql-align-justify { text-align: justify; } - .ql-editor .ql-align-right { text-align: right; } - .ql-editor .ql-ui { position: absolute; } - .ql-editor.ql-blank::before { color: rgba(0, 0, 0, 0.6); content: attr(data-placeholder); @@ -612,41 +498,38 @@ border-radius: 4px 4px 0 0; } -.ql-snow.ql-toolbar::after, -.ql-snow .ql-toolbar::after { +.ql-snow.ql-toolbar:after, +.ql-snow .ql-toolbar:after { clear: both; content: ''; display: table; } - .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button { background: none; border: none; cursor: pointer; - display: inline-block; + display: flex; float: left; height: 24px; padding: 3px 5px; width: 28px; + align-items: center; + justify-content: center; } - .ql-snow.ql-toolbar button svg, .ql-snow .ql-toolbar button svg { float: left; height: 100%; } - .ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover { outline: none; } - .ql-snow.ql-toolbar input.ql-image[type='file'], .ql-snow .ql-toolbar input.ql-image[type='file'] { display: none; } - .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, @@ -663,7 +546,6 @@ .ql-snow .ql-toolbar .ql-picker-item.ql-selected { color: #06c; } - .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, @@ -694,7 +576,6 @@ .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { fill: #06c; } - .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, @@ -725,20 +606,17 @@ .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { stroke: #06c; } - @media (pointer: coarse) { .ql-snow.ql-toolbar button:hover:not(.ql-active), .ql-snow .ql-toolbar button:hover:not(.ql-active) { color: #444; } - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { fill: #444; } - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, @@ -746,45 +624,39 @@ stroke: #444; } } - .ql-snow { box-sizing: border-box; } - .ql-snow * { box-sizing: border-box; } - .ql-snow .ql-hidden { display: none; } - .ql-snow .ql-out-bottom, .ql-snow .ql-out-top { visibility: hidden; } - +.ql-snow .ql-tooltip { + position: absolute; + transform: translateY(10px); +} .ql-snow .ql-tooltip a { cursor: pointer; - line-height: 26px; text-decoration: none; } - .ql-snow .ql-tooltip.ql-flip { transform: translateY(-10px); } - .ql-snow .ql-formats { display: inline-block; vertical-align: middle; } - -.ql-snow .ql-formats::after { +.ql-snow .ql-formats:after { clear: both; content: ''; display: table; } - .ql-snow .ql-stroke { fill: none; stroke: #444; @@ -792,115 +664,96 @@ stroke-linejoin: round; stroke-width: 2; } - .ql-snow .ql-stroke-miter { fill: none; stroke: #444; stroke-miterlimit: 10; stroke-width: 2; } - .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: #444; } - .ql-snow .ql-empty { fill: none; } - .ql-snow .ql-even { fill-rule: evenodd; } - .ql-snow .ql-thin, .ql-snow .ql-stroke.ql-thin { stroke-width: 1; } - .ql-snow .ql-transparent { opacity: 0.4; } - .ql-snow .ql-direction svg:last-child { display: none; } - .ql-snow .ql-direction.ql-active svg:last-child { display: inline; } - .ql-snow .ql-direction.ql-active svg:first-child { display: none; } - .ql-snow .ql-editor h1 { font-size: 2em; } - .ql-snow .ql-editor h2 { font-size: 1.5em; } - .ql-snow .ql-editor h3 { font-size: 1.17em; } - .ql-snow .ql-editor h4 { font-size: 1em; } - .ql-snow .ql-editor h5 { font-size: 0.83em; } - .ql-snow .ql-editor h6 { font-size: 0.67em; } - .ql-snow .ql-editor a { text-decoration: underline; } - .ql-snow .ql-editor blockquote { border-left: 4px solid #ccc; margin-bottom: 5px; margin-top: 5px; padding-left: 16px; } - -.ql-snow .ql-editor code { +.ql-snow .ql-editor code, +.ql-snow .ql-editor .ql-code-block-container { background-color: #f0f0f0; border-radius: 3px; +} +.ql-snow .ql-editor .ql-code-block-container { + margin-bottom: 5px; + margin-top: 5px; + padding: 5px 10px; +} +.ql-snow .ql-editor code { font-size: 85%; padding: 2px 4px; } - .ql-snow .ql-editor .ql-code-block-container { - background-color: #f0f0f0; - border-radius: 3px; + background-color: #23241f; color: #f8f8f2; - margin-bottom: 5px; - margin-top: 5px; overflow: visible; - padding: 5px 10px; } - .ql-snow .ql-editor img { max-width: 100%; } - .ql-snow .ql-picker { color: #444; display: inline-block; - float: left; font-size: 14px; font-weight: 500; height: 24px; position: relative; vertical-align: middle; } - .ql-snow .ql-picker-label { cursor: pointer; display: inline-block; @@ -910,12 +763,10 @@ position: relative; width: 100%; } - .ql-snow .ql-picker-label::before { display: inline-block; line-height: 22px; } - .ql-snow .ql-picker-options { background-color: #fff; display: none; @@ -924,64 +775,52 @@ position: absolute; white-space: nowrap; } - .ql-snow .ql-picker-options .ql-picker-item { cursor: pointer; display: block; padding-bottom: 5px; padding-top: 5px; } - .ql-snow .ql-picker.ql-expanded .ql-picker-label { color: #ccc; z-index: 2; } - .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: #ccc; } - .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: #ccc; } - .ql-snow .ql-picker.ql-expanded .ql-picker-options { display: block; margin-top: -1px; top: 100%; z-index: 1; } - .ql-snow .ql-color-picker, .ql-snow .ql-icon-picker { width: 28px; } - .ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label { padding: 2px 4px; } - .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg { right: 4px; } - .ql-snow .ql-icon-picker .ql-picker-options { padding: 4px 0; } - .ql-snow .ql-icon-picker .ql-picker-item { height: 24px; - padding: 2px 4px; width: 24px; + padding: 2px 4px; } - .ql-snow .ql-color-picker .ql-picker-options { padding: 3px 5px; width: 152px; } - .ql-snow .ql-color-picker .ql-picker-item { border: 1px solid transparent; float: left; @@ -990,15 +829,13 @@ padding: 0; width: 16px; } - .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { - margin-top: -9px; position: absolute; + margin-top: -9px; right: 0; top: 50%; width: 18px; } - .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, @@ -1007,267 +844,190 @@ .ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { content: attr(data-label); } - .ql-snow .ql-picker.ql-header { width: 98px; } - .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: '14px'; } - .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before { content: '14px'; font-size: 14px !important; } - .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { content: '16px'; font-size: 16px !important; } - .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { content: '18px'; font-size: 18px !important; } - -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before { - font-size: 14px !important; -} - -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before { - font-size: 16px !important; -} - -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before { - font-size: 18px !important; -} - -.ql-editor .ql-size-14px { - font-size: 0.75em; -} - -.ql-editor .ql-size-16px { - font-size: 1.5em; -} - -.ql-editor .ql-size-18px { - font-size: 2.5em; -} - -.ql-snow .ql-picker.ql-header .ql-picker-label::before, -.ql-snow .ql-picker.ql-header .ql-picker-item::before { - content: 'Normal'; -} - .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { content: 'Heading 1'; } - .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { content: 'Heading 2'; } - .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { content: 'Heading 3'; } - .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { content: 'Heading 4'; } - .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { content: 'Heading 5'; } - .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { content: 'Heading 6'; } - .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { font-size: 2em; } - .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { font-size: 1.5em; } - .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { font-size: 1.17em; } - .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { font-size: 1em; } - .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { font-size: 0.83em; } - .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { font-size: 0.67em; } - .ql-snow .ql-picker.ql-font { width: 108px; } - .ql-snow .ql-picker.ql-font .ql-picker-label::before, .ql-snow .ql-picker.ql-font .ql-picker-item::before { content: 'Sans Serif'; } - .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { content: 'Serif'; } - .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { content: 'Monospace'; } - .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { - font-family: Georgia, 'Times New Roman', serif; + font-family: + Georgia, + Times New Roman, + serif; } - .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { - font-family: Monaco, 'Courier New', monospace; + font-family: + Monaco, + Courier New, + monospace; } - .ql-snow .ql-picker.ql-size { width: 98px; } - +.ql-snow .ql-picker.ql-size .ql-picker-label::before, +.ql-snow .ql-picker.ql-size .ql-picker-item::before { + content: 'Normal'; +} .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { content: 'Small'; } - .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { content: 'Large'; } - .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { content: 'Huge'; } - .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { font-size: 10px; } - .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { font-size: 18px; } - .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { font-size: 32px; } - .ql-snow .ql-color-picker.ql-background .ql-picker-item { background-color: #fff; } - .ql-snow .ql-color-picker.ql-color .ql-picker-item { background-color: #000; } - .ql-code-block-container { position: relative; } - .ql-code-block-container .ql-ui { right: 5px; top: 5px; } - .ql-toolbar.ql-snow { border: 1px solid #ccc; box-sizing: border-box; - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - padding: 0; + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + padding: 8px; } .ql-toolbar.ql-snow .ql-formats:not(:last-child) { border-right: 1px solid #ccc; - margin: 5px 0; - padding: 2px; -} - -.ql-toolbar.ql-snow .ql-formats { - margin-left: 2px; - margin-right: 2px; -} - -.ql-toolbar.ql-snow .ql-formats button { - padding-left: 0; } - .ql-toolbar.ql-snow .ql-picker-label { border: 1px solid transparent; } - .ql-toolbar.ql-snow .ql-picker-options { border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px; } - .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: #ccc; } - .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { border-color: #ccc; } - .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, .ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { border-color: #000; } - .ql-toolbar.ql-snow + .ql-container.ql-snow { border-top: 0; } - .ql-snow .ql-tooltip { background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 5px #ddd; color: #444; padding: 5px 12px; - position: absolute; - transform: translateY(10px); white-space: nowrap; } - .ql-snow .ql-tooltip::before { content: 'Visit URL:'; line-height: 26px; margin-right: 8px; } - .ql-snow .ql-tooltip input[type='text'] { - border: 1px solid #ccc; display: none; + border: 1px solid #ccc; font-size: 13px; height: 26px; margin: 0; padding: 3px 5px; width: 170px; } - .ql-snow .ql-tooltip a.ql-preview { display: inline-block; max-width: 200px; @@ -1275,52 +1035,43 @@ text-overflow: ellipsis; vertical-align: top; } - .ql-snow .ql-tooltip a.ql-action::after { border-right: 1px solid #ccc; content: 'Edit'; margin-left: 16px; padding-right: 8px; } - .ql-snow .ql-tooltip a.ql-remove::before { content: 'Remove'; margin-left: 8px; } - +.ql-snow .ql-tooltip a { + line-height: 26px; +} .ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove { display: none; } - .ql-snow .ql-tooltip.ql-editing input[type='text'] { display: inline-block; } - .ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0; content: 'Save'; padding-right: 0; } - .ql-snow .ql-tooltip[data-mode='link']::before { content: 'Enter link:'; } - .ql-snow .ql-tooltip[data-mode='formula']::before { content: 'Enter formula:'; } - .ql-snow .ql-tooltip[data-mode='video']::before { content: 'Enter video:'; } - .ql-snow a { color: #06c; } - .ql-container.ql-snow { border: 1px solid #ccc; - border-bottom: 1px solid #6a6e79; - min-height: 200px; } diff --git a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx index d4f21fc05..05e145781 100644 --- a/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx +++ b/stencil-workspace/src/components/modus-text-editor/modus-text-editor.tsx @@ -1,20 +1,40 @@ -import { Component, h, Element } from '@stencil/core'; +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core'; import Quill from 'quill'; +import { Attributor } from 'parchment'; import { ModusIconMap } from '../../icons/ModusIconMap'; import { convertIconToSVG } from '../../utils/utils'; +//import { Delta } from 'quill/core'; @Component({ tag: 'modus-text-editor', styleUrl: 'modus-text-editor.scss', }) export class ModusTextEditor { - @Element() hostElement; + /** (optional) Content of the editor. */ + @Prop() content: string; - quillInstance: Quill; - el: Element; + /** (optional) Disables the editor. */ + @Prop() disabled = false; + + /** (optional) The placeholder text of the editor. */ + @Prop() placeholder = ''; + + /** An event that fires on input value change. */ + @Event() textChange: EventEmitter<{ delta: unknown; oldDelta: unknown; source: string }>; + + /** An event that fires on selection change. */ + @Event() selectionUpdate: EventEmitter<{ range: unknown; oldRange: unknown; source: string }>; + + /** An event that fires on editor change. */ + @Event() editorChange: EventEmitter<{ eventName: string; args: unknown[] }>; + + private quillInstance: Quill; private fontSizeArr = ['14px', '16px', '18px']; + @Element() hostElement: HTMLElement; + setIcons() { const icons = Quill.import('ui/icons'); icons['bold'] = convertIconToSVG(); @@ -30,10 +50,8 @@ export class ModusTextEditor { } setFontSize() { - const fontSize: any = Quill.import('attributors/style/size'); - + const fontSize = Quill.import('attributors/style/size') as Attributor; fontSize.whitelist = this.fontSizeArr; - Quill.register(fontSize, true); } @@ -52,10 +70,11 @@ export class ModusTextEditor { } initializeQuillEditor() { - const editorContainer = this.hostElement.querySelector('.editor-container'); + const editorContainer = this.hostElement.querySelector('.editor-container') as HTMLElement; this.setIcons(); this.setFontSize(); + const toolbarOptions = { container: [ [{ font: ['serif', 'monospace'] }], @@ -65,19 +84,6 @@ export class ModusTextEditor { [{ list: 'bullet' }, { list: 'ordered' }], ['link'], ], - handlers: { - link: function (value) { - console.log(value); - if (value) { - const href = prompt('Enter the URL'); - - console.log('quill', this.quill.format('link', href)); - this.quill.format('link', true); - } else { - this.quill.format('link', false); - } - }, - }, }; if (editorContainer) { @@ -85,14 +91,39 @@ export class ModusTextEditor { modules: { toolbar: toolbarOptions, }, + placeholder: this?.placeholder, theme: 'snow', }); + + if (this.content) { + this.quillInstance.setText(this.content); + } + if (this.disabled) { + this.quillInstance.enable(false); + } + + this.attachQuillEventListeners(); } this.setCaretIcons(); } + attachQuillEventListeners() { + this.quillInstance.on('text-change', (delta, oldDelta, source) => { + this.textChange.emit({ delta, oldDelta, source }); + }); + + this.quillInstance.on('selection-change', (range, oldRange, source) => { + this.selectionUpdate.emit({ range, oldRange, source }); + }); + + this.quillInstance.on('editor-change', (eventName, ...args) => { + this.editorChange.emit({ eventName, args }); + }); + } + render() { - return
; + const editorContainerClass = `editor-container ${this.disabled ? 'disabled' : ''}`; + return
; } } diff --git a/stencil-workspace/src/index.html b/stencil-workspace/src/index.html index 269c80bfb..1d195059b 100644 --- a/stencil-workspace/src/index.html +++ b/stencil-workspace/src/index.html @@ -19,8 +19,25 @@

Modus Editor

- + + + diff --git a/stencil-workspace/storybook/stories/components/modus-text-editor/modus-text-editor-storybook-docs.mdx b/stencil-workspace/storybook/stories/components/modus-text-editor/modus-text-editor-storybook-docs.mdx new file mode 100644 index 000000000..19b5d3470 --- /dev/null +++ b/stencil-workspace/storybook/stories/components/modus-text-editor/modus-text-editor-storybook-docs.mdx @@ -0,0 +1,35 @@ +# Text Editor + +--- + +The [Modus Text Editor](https://modus.trimble.com/components/text-editor/) is a rich-text editor built to offer customizable and easy-to-use content editing tools. It provides common text editing features like bold, italic, underline, and text alignment, along with the ability to insert links, images, and more. + +#### Implementation Details + +- The `modus-text-editor` component offers a toolbar for formatting text, and an editable content area. +- Use the `content` property to get or set the content of the editor. +- Customize the toolbar by passing an array of toolbar options via the `toolbar-options` property. + +### Default + +```html + +``` + +### Properties + +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ------------------------------------------- | --------- | ------- | +| `content` | `content` | (optional) Content of the text editor. | `string` | `""` | +| `disabled` | `disabled` | (optional) Disables the editor. | `boolean` | `false` | +| `placeholder` | `placeholder` | (optional) Placeholder text for the editor. | `string` | `""` | + +### Events + +| Event | Description | Type | +| ----------------- | ---------------------------- | -------------------------------------------------------------------- | +| `editorChange` | Fired on editor change. | `CustomEvent<{ eventName: string; args: unknown[] }>` | +| `selectionUpdate` | Fired on selection change. | `CustomEvent<{ range: unknown; oldRange: unknown; source: string }>` | +| `textChange` | Fired on input value change. | `CustomEvent<{ delta: unknown; oldDelta: unknown; source: string }>` | + +### Accessibility