@squiz/formatted-text-editor 1.12.0-alpha.37 → 1.12.0-alpha.38

package/build.js

@@ -1,11 +1,21 @@
 const esbuild = require('esbuild');
 const { sassPlugin } = require('esbuild-sass-plugin');
+const postcss = require('postcss');
+const tailwindcss = require('tailwindcss');
 
 esbuild
   .build({
     entryPoints: ['src/index.scss'],
     bundle: true,
     outdir: 'lib',
-    plugins: [sassPlugin({ type: 'css' })],
+    plugins: [
+      sassPlugin({
+        type: 'css',
+        transform: async (source) => {
+          const { css } = postcss(tailwindcss).process(source);
+          return css;
+        },
+      }),
+    ],
   })
   .catch(() => process.exit(1));

package/lib/index.css

@@ -863,13 +863,6 @@ button:active .remirror-menu-pane-shortcut,
   text-shadow: none;
   background: #dfe2f1;
 }
-.remirror-base16-ateliersulphurpool-light pre[class*=language-]::-moz-selection,
-.remirror-base16-ateliersulphurpool-light pre[class*=language-] ::-moz-selection,
-.remirror-base16-ateliersulphurpool-light code[class*=language-]::-moz-selection,
-.remirror-base16-ateliersulphurpool-light code[class*=language-] ::-moz-selection {
-  text-shadow: none;
-  background: #dfe2f1;
-}
 .remirror-base16-ateliersulphurpool-light pre[class*=language-]::selection,
 .remirror-base16-ateliersulphurpool-light pre[class*=language-] ::selection,
 .remirror-base16-ateliersulphurpool-light code[class*=language-]::selection,
@@ -1137,13 +1130,6 @@ button:active .remirror-menu-pane-shortcut,
   color: inherit;
   background: rgba(33, 66, 131, 0.85);
 }
-.remirror-darcula pre[class*=language-]::-moz-selection,
-.remirror-darcula pre[class*=language-] ::-moz-selection,
-.remirror-darcula code[class*=language-]::-moz-selection,
-.remirror-darcula code[class*=language-] ::-moz-selection {
-  color: inherit;
-  background: rgba(33, 66, 131, 0.85);
-}
 .remirror-darcula pre[class*=language-]::selection,
 .remirror-darcula pre[class*=language-] ::selection,
 .remirror-darcula code[class*=language-]::selection,
@@ -1385,13 +1371,6 @@ button:active .remirror-menu-pane-shortcut,
   text-shadow: none;
   background: #6a51e6;
 }
-.remirror-duotone-dark pre[class*=language-]::-moz-selection,
-.remirror-duotone-dark pre[class*=language-] ::-moz-selection,
-.remirror-duotone-dark code[class*=language-]::-moz-selection,
-.remirror-duotone-dark code[class*=language-] ::-moz-selection {
-  text-shadow: none;
-  background: #6a51e6;
-}
 .remirror-duotone-dark pre[class*=language-]::selection,
 .remirror-duotone-dark pre[class*=language-] ::selection,
 .remirror-duotone-dark code[class*=language-]::selection,
@@ -1535,13 +1514,6 @@ button:active .remirror-menu-pane-shortcut,
   text-shadow: none;
   background: #6f5849;
 }
-.remirror-duotone-earth pre[class*=language-]::-moz-selection,
-.remirror-duotone-earth pre[class*=language-] ::-moz-selection,
-.remirror-duotone-earth code[class*=language-]::-moz-selection,
-.remirror-duotone-earth code[class*=language-] ::-moz-selection {
-  text-shadow: none;
-  background: #6f5849;
-}
 .remirror-duotone-earth pre[class*=language-]::selection,
 .remirror-duotone-earth pre[class*=language-] ::selection,
 .remirror-duotone-earth code[class*=language-]::selection,
@@ -1685,13 +1657,6 @@ button:active .remirror-menu-pane-shortcut,
   text-shadow: none;
   background: #435643;
 }
-.remirror-duotone-forest pre[class*=language-]::-moz-selection,
-.remirror-duotone-forest pre[class*=language-] ::-moz-selection,
-.remirror-duotone-forest code[class*=language-]::-moz-selection,
-.remirror-duotone-forest code[class*=language-] ::-moz-selection {
-  text-shadow: none;
-  background: #435643;
-}
 .remirror-duotone-forest pre[class*=language-]::selection,
 .remirror-duotone-forest pre[class*=language-] ::selection,
 .remirror-duotone-forest code[class*=language-]::selection,
@@ -1835,13 +1800,6 @@ button:active .remirror-menu-pane-shortcut,
   text-shadow: none;
   background: #faf8f5;
 }
-.remirror-duotone-light pre[class*=language-]::-moz-selection,
-.remirror-duotone-light pre[class*=language-] ::-moz-selection,
-.remirror-duotone-light code[class*=language-]::-moz-selection,
-.remirror-duotone-light code[class*=language-] ::-moz-selection {
-  text-shadow: none;
-  background: #faf8f5;
-}
 .remirror-duotone-light pre[class*=language-]::selection,
 .remirror-duotone-light pre[class*=language-] ::selection,
 .remirror-duotone-light code[class*=language-]::selection,
@@ -1985,13 +1943,6 @@ button:active .remirror-menu-pane-shortcut,
   text-shadow: none;
   background: #004a9e;
 }
-.remirror-duotone-sea pre[class*=language-]::-moz-selection,
-.remirror-duotone-sea pre[class*=language-] ::-moz-selection,
-.remirror-duotone-sea code[class*=language-]::-moz-selection,
-.remirror-duotone-sea code[class*=language-] ::-moz-selection {
-  text-shadow: none;
-  background: #004a9e;
-}
 .remirror-duotone-sea pre[class*=language-]::selection,
 .remirror-duotone-sea pre[class*=language-] ::selection,
 .remirror-duotone-sea code[class*=language-]::selection,
@@ -2135,13 +2086,6 @@ button:active .remirror-menu-pane-shortcut,
   text-shadow: none;
   background: #5151e6;
 }
-.remirror-duotone-space pre[class*=language-]::-moz-selection,
-.remirror-duotone-space pre[class*=language-] ::-moz-selection,
-.remirror-duotone-space code[class*=language-]::-moz-selection,
-.remirror-duotone-space code[class*=language-] ::-moz-selection {
-  text-shadow: none;
-  background: #5151e6;
-}
 .remirror-duotone-space pre[class*=language-]::selection,
 .remirror-duotone-space pre[class*=language-] ::selection,
 .remirror-duotone-space code[class*=language-]::selection,
@@ -2274,12 +2218,6 @@ button:active .remirror-menu-pane-shortcut,
 .remirror-gh-colors code[class*=language-] ::-moz-selection {
   background: #b3d4fc;
 }
-.remirror-gh-colors pre[class*=language-]::-moz-selection,
-.remirror-gh-colors pre[class*=language-] ::-moz-selection,
-.remirror-gh-colors code[class*=language-]::-moz-selection,
-.remirror-gh-colors code[class*=language-] ::-moz-selection {
-  background: #b3d4fc;
-}
 .remirror-gh-colors pre[class*=language-]::selection,
 .remirror-gh-colors pre[class*=language-] ::selection,
 .remirror-gh-colors code[class*=language-]::selection,
@@ -2596,12 +2534,6 @@ button:active .remirror-menu-pane-shortcut,
 .remirror-vs code[class*=language-] ::-moz-selection {
   background: #c1def1;
 }
-.remirror-vs pre[class*=language-]::-moz-selection,
-.remirror-vs pre[class*=language-] ::-moz-selection,
-.remirror-vs code[class*=language-]::-moz-selection,
-.remirror-vs code[class*=language-] ::-moz-selection {
-  background: #c1def1;
-}
 .remirror-vs pre[class*=language-]::selection,
 .remirror-vs pre[class*=language-] ::selection,
 .remirror-vs code[class*=language-]::selection,
@@ -2731,8 +2663,6 @@ button:active .remirror-menu-pane-shortcut,
   border-radius: 4px;
   border: 1px solid #e1e1e8;
   overflow: auto;
-}
-.remirror-xonokai pre[class*=language-] {
   position: relative;
 }
 .remirror-xonokai pre[class*=language-] code {
@@ -3766,30 +3696,413 @@ button:active .remirror-menu-pane-shortcut,
 }
 
 /* src/index.scss */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #ededed;
+}
+::before,
+::after {
+  --tw-content: "";
+}
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+  font-feature-settings: normal;
+}
+body {
+  margin: 0;
+  line-height: inherit;
+}
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp,
+pre {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace;
+  font-size: 1em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+[type=button],
+[type=reset],
+[type=submit] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+:-moz-focusring {
+  outline: auto;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+progress {
+  vertical-align: baseline;
+}
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+summary {
+  display: list-item;
+}
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+legend {
+  padding: 0;
+}
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+textarea {
+  resize: vertical;
+}
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+button,
+[role=button] {
+  cursor: pointer;
+}
+:disabled {
+  cursor: default;
+}
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+[hidden] {
+  display: none;
+}
+*,
+::before,
+::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
+}
+.fixed {
+  position: fixed;
+}
+.left-20 {
+  left: 5rem;
+}
+.z-10 {
+  z-index: 10;
+}
+.mt-2 {
+  margin-top: 0.5rem;
+}
+.block {
+  display: block;
+}
+.inline {
+  display: inline;
+}
+.w-56 {
+  width: 14rem;
+}
+.origin-top-right {
+  transform-origin: top right;
+}
+.rounded-md {
+  border-radius: 6px;
+}
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.italic {
+  font-style: italic;
+}
+.underline {
+  text-decoration-line: underline;
+}
+.shadow-md {
+  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 12px 4px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .formatted-text-editor.editor-wrapper {
-  @apply bg-white rounded border-gray-300 border-2 border-solid;
+  border-radius: 4px;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(224 224 224 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 .formatted-text-editor .remirror-editor-wrapper {
-  @apply text-gray-600 pt-0;
+  padding-top: 0px;
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
 }
 .formatted-text-editor .remirror-editor {
-  @apply bg-white shadow-none rounded-b;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
 }
 .formatted-text-editor .remirror-editor:active,
 .formatted-text-editor .remirror-editor :focus {
 }
 .formatted-text-editor .remirror-editor p {
-  @apply block;
+  display: block;
 }
 .remirror-theme .ProseMirror:active,
 .remirror-theme .ProseMirror:focus {
-  @apply shadow-none;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
 }
 .formatted-text-editor .editor-toolbar {
-  @apply bg-white rounded border-gray-200 border-2 border-solid p-1;
+  border-radius: 4px;
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(237 237 237 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 0.25rem;
   display: flex;
   justify-items: center;
 }
@@ -3797,14 +4110,31 @@ button:active .remirror-menu-pane-shortcut,
   margin: 0 0 0 2px;
 }
 .formatted-text-editor .editor-toolbar .editor-divider {
-  @apply -my-1 mx-1 border;
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  border-width: 1px;
   margin-right: 2px;
 }
 .remirror-floating-popover {
-  @apply bg-white border-gray-200 p-1 rounded-md shadow border;
+  border-radius: 6px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(237 237 237 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 0.25rem;
+  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12);
+  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 12px 4px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
 }
 .btn {
-  @apply font-normal rounded;
+  border-radius: 4px;
+  font-weight: 400;
   display: flex;
   align-items: center;
   text-align: center;
@@ -3823,23 +4153,37 @@ button:active .remirror-menu-pane-shortcut,
 .btn.disabled,
 .btn[disabled] {
   cursor: not-allowed;
-  @apply opacity-50;
+  opacity: 0.5;
 }
 .toolbar-button {
-  @apply bg-white text-gray-600 p-1;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
 }
 .toolbar-button ~ .toolbar-button {
   margin-left: 2px;
 }
 .toolbar-button.is-active,
 .toolbar-button:active {
-  @apply text-blue-300 bg-blue-100;
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 241 250 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(7 116 210 / var(--tw-text-opacity));
 }
 .toolbar-dropdown {
   align-self: center;
 }
 .toolbar-dropdown .toolbar-dropdown__button {
-  @apply font-base text-md font-semibold text-gray-600;
+  font-family:
+    Open Sans,
+    Arial,
+    sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
   height: 2rem;
   padding-left: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.37",
+  "version": "1.12.0-alpha.38",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -61,5 +61,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "0f193852ffb9b6123830b1b5d4cd1b64d5495c4f"
+  "gitHead": "d4b60ab436f867e63c904ecabf780dce2a2b0a44"
 }