@squiz/formatted-text-editor 1.12.0-alpha.17 → 1.12.0-alpha.18

package/demo/index.scss

@@ -1,11 +1 @@
-/* Global variables */
-:root {
-  --grey-200: #ededed;
-  --grey-300: #e0e0e0;
-  --grey-600: #707070;
-  --blue-100: #e6f1fa;
-  --blue-300: #0774d2;
-  --border-radius: 4px;
-}
-
 @import '../src/index.scss';

package/lib/index.css

@@ -3766,35 +3766,30 @@ button:active .remirror-menu-pane-shortcut,
 }
 
 /* src/index.scss */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 .formatted-text-editor.editor-wrapper {
-  background: white;
-  border: 2px solid var(--grey-300);
-  border-radius: 4px;
+  @apply bg-white rounded border-gray-300 border-2 border-solid;
 }
 .formatted-text-editor .remirror-editor-wrapper {
-  padding-top: 0;
-  color: var(--grey-600);
+  @apply text-gray-600 pt-0;
 }
 .formatted-text-editor .remirror-editor {
-  box-shadow: none;
-  background: white;
-  border-radius: 0 0 4px 4px;
+  @apply bg-white shadow-none rounded-b;
 }
 .formatted-text-editor .remirror-editor:active,
 .formatted-text-editor .remirror-editor :focus {
 }
 .formatted-text-editor .remirror-editor p {
-  display: block;
+  @apply block;
 }
 .remirror-theme .ProseMirror:active,
 .remirror-theme .ProseMirror:focus {
-  box-shadow: none;
+  @apply shadow-none;
 }
 .formatted-text-editor .editor-toolbar {
-  border-bottom: 2px solid var(--grey-200);
-  background-color: white;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
+  @apply bg-white rounded border-gray-200 border-2 border-solid p-1;
   display: flex;
   justify-items: center;
 }
@@ -3802,20 +3797,16 @@ button:active .remirror-menu-pane-shortcut,
   margin: 0 0 0 2px;
 }
 .formatted-text-editor .editor-toolbar .editor-divider {
-  margin: -4px 2px -4px 4px;
-  border-width: 1px;
+  @apply -my-1 mx-1 border;
+  margin-right: 2px;
 }
 .remirror-floating-popover {
-  padding: 4px;
-  border: 1px var(--grey-200);
-  border-radius: 6px;
-  background-color: white;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 12px 4px rgba(0, 0, 0, 0.12);
+  @apply bg-white border-gray-200 p-1 rounded-md shadow border;
 }
 .btn {
+  @apply font-normal rounded;
   display: flex;
   align-items: center;
-  font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -3823,7 +3814,6 @@ button:active .remirror-menu-pane-shortcut,
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: var(--border-radius);
 }
 .btn:active,
 .btn:hover,
@@ -3833,18 +3823,15 @@ button:active .remirror-menu-pane-shortcut,
 .btn.disabled,
 .btn[disabled] {
   cursor: not-allowed;
-  opacity: 0.5;
+  @apply opacity-50;
 }
 .toolbar-button {
-  background-color: white;
-  color: var(--grey-600);
-  padding: 4px;
+  @apply bg-white text-gray-600 p-1;
 }
 .toolbar-button ~ .toolbar-button {
   margin-left: 2px;
 }
 .toolbar-button.is-active,
 .toolbar-button:active {
-  background-color: var(--blue-100);
-  color: var(--blue-300);
+  @apply text-blue-300 bg-blue-100;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.17",
+  "version": "1.12.0-alpha.18",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -26,15 +26,19 @@
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "3.0.0",
+    "autoprefixer": "10.4.13",
     "cypress": "12.5.1",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
     "jest-environment-jsdom": "29.4.1",
+    "postcss": "8.4.21",
+    "postcss-nested": "6.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "4.1.2",
+    "tailwindcss": "3.2.6",
     "typescript": "4.9.3",
     "vite": "4.0.0"
   },
@@ -55,5 +59,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "ac1e5737c3256329e09cf0f5cf0b2aa3a9891c8f"
+  "gitHead": "83a466017f86c6f20f7f7307907a15b8931310ac"
 }

package/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss'), require('autoprefixer'), require('postcss-nested')],
+};

package/src/Editor/{editor.scss → _editor.scss}

@@ -1,19 +1,14 @@
 .formatted-text-editor {
   &.editor-wrapper {
-    background: white;
-    border: 2px solid var(--grey-300);
-    border-radius: 4px;
+    @apply bg-white rounded border-gray-300 border-2 border-solid;
   }
 
   .remirror-editor-wrapper {
-    padding-top: 0;
-    color: var(--grey-600);
+    @apply text-gray-600 pt-0;
   }
 
   .remirror-editor {
-    box-shadow: none;
-    background: white;
-    border-radius: 0 0 4px 4px;
+    @apply bg-white shadow-none rounded-b;
 
     &:active,
     :focus {
@@ -22,7 +17,7 @@
 
     p {
       /* Make sure content aligned with "text-align: justify" is justified */
-      display: block;
+      @apply block;
     }
   }
 }
@@ -31,6 +26,6 @@
 .remirror-theme .ProseMirror {
   &:active,
   &:focus {
-    box-shadow: none;
+    @apply shadow-none;
   }
 }

package/src/EditorToolbar/_editor-toolbar.scss

@@ -0,0 +1,19 @@
+.formatted-text-editor .editor-toolbar {
+  @apply bg-white rounded border-gray-200 border-2 border-solid p-1;
+
+  display: flex;
+  justify-items: center;
+
+  > *:not(:first-child) {
+    margin: 0 0 0 2px;
+  }
+
+  .editor-divider {
+    @apply -my-1 mx-1 border;
+    margin-right: 2px;
+  }
+}
+
+.remirror-floating-popover {
+  @apply bg-white border-gray-200 p-1 rounded-md shadow border;
+}

package/src/index.scss

@@ -1,4 +1,13 @@
+/* Tailwind base */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+/* Remirror base */
 @import 'remirror/styles/all.css';
-@import './Editor/editor.scss';
-@import './EditorToolbar/editor-toolbar.scss';
-@import './ui/ToolbarButton/toolbar-button.scss';
+
+/* Components */
+@import './Editor/editor';
+@import './EditorToolbar/editor-toolbar';
+
+@import './ui/ToolbarButton/toolbar-button';

package/src/ui/ToolbarButton/{toolbar-button.scss → _toolbar-button.scss}

@@ -1,7 +1,7 @@
 .btn {
+  @apply font-normal rounded;
   display: flex;
   align-items: center;
-  font-weight: 400;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -9,7 +9,6 @@
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: var(--border-radius);
 
   &:active,
   &:hover,
@@ -20,14 +19,12 @@
   &.disabled,
   &[disabled] {
     cursor: not-allowed;
-    opacity: 0.5;
+    @apply opacity-50;
   }
 }
 
 .toolbar-button {
-  background-color: white;
-  color: var(--grey-600);
-  padding: 4px;
+  @apply bg-white text-gray-600 p-1;
 
   ~ .toolbar-button {
     margin-left: 2px;
@@ -35,7 +32,6 @@
 
   &.is-active,
   &:active {
-    background-color: var(--blue-100);
-    color: var(--blue-300);
+    @apply text-blue-300 bg-blue-100;
   }
 }

package/tailwind.config.cjs

@@ -0,0 +1,52 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      borderRadius: {
+        DEFAULT: '4px',
+        md: '6px',
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+      },
+      boxShadow: {
+        outline: '0 0 0 1px rgba(0,0,0,0.10)',
+        sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
+        DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+        none: 'none',
+      },
+      spacing: {
+        1: '0.25rem', // 4px
+        2: '0.5rem', // 8px
+        3: '0.75rem', // 12px
+        4: '1rem', // 16px
+        5: '1.25rem', // 20px
+        6: '1.5rem', // 24px
+        7: '1.75rem', // 28px
+        8: '2rem', // 32px
+      },
+      colors: {
+        gray: {
+          200: '#ededed',
+          300: '#e0e0e0',
+          600: '#707070',
+        },
+        blue: {
+          100: '#e6f1fa',
+          300: '#0774d2',
+        },
+        orange: {
+          100: '#dadbe9',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/src/EditorToolbar/editor-toolbar.scss

@@ -1,25 +0,0 @@
-.formatted-text-editor .editor-toolbar {
-  border-bottom: 2px solid var(--grey-200);
-  background-color: white;
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-
-  display: flex;
-  justify-items: center;
-
-  > *:not(:first-child) {
-    margin: 0 0 0 2px;
-  }
-  .editor-divider {
-    margin: -4px 2px -4px 4px;
-    border-width: 1px;
-  }
-}
-
-.remirror-floating-popover {
-  padding: 4px;
-  border: 1px var(--grey-200);
-  border-radius: 6px;
-  background-color: white;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 12px 4px rgba(0, 0, 0, 0.12);
-}