Clear format tool

JacobFitzp · Oct 18, 2024 · 95ca3be · 95ca3be
1 parent 77ce8d6
commit 95ca3be
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 26 deletions.
diff --git a/dist/css/field.css b/dist/css/field.css
@@ -17,3 +17,7 @@
 .nova-canvas .format-dropdown:focus {
   outline-color: rgba(var(--colors-primary-600));
 }
+.nova-canvas-header.top-sticky {
+  border-radius: 0;
+  box-shadow: none;
+}
diff --git a/dist/js/field.js b/dist/js/field.js
@@ -6257,7 +6257,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   "extends": _BaseTool__WEBPACK_IMPORTED_MODULE_0__["default"],
   components: {
@@ -6679,7 +6678,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
 
 var _hoisted_1 = {
-  "class": "text-gray-200 dark:text-gray-600 font-light px-2 text-lg"
+  "class": "text-gray-200 dark:text-gray-600 font-light text-lg"
 };
 function render(_ctx, _cache) {
   return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_1, "|");
@@ -7350,6 +7349,34 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./resources/js/modules/tools/TextStyling/ClearFormat.js":
+/*!***************************************************************!*\
+  !*** ./resources/js/modules/tools/TextStyling/ClearFormat.js ***!
+  \***************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _heroicons_vue_24_outline__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @heroicons/vue/24/outline */ "./node_modules/@heroicons/vue/24/outline/esm/NoSymbolIcon.js");
+/* harmony import */ var _components_Tools_Standard_vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../components/Tools/Standard.vue */ "./resources/js/components/Tools/Standard.vue");
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
+  icon: _heroicons_vue_24_outline__WEBPACK_IMPORTED_MODULE_1__["default"],
+  component: _components_Tools_Standard_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
+  apply: function apply(editor) {
+    editor.chain().focus().unsetAllMarks().run();
+  },
+  active: function active(editor) {
+    return false;
+  }
+});
+
+/***/ }),
+
 /***/ "./resources/js/modules/tools/TextStyling/Italic.js":
 /*!**********************************************************!*\
   !*** ./resources/js/modules/tools/TextStyling/Italic.js ***!
@@ -7460,17 +7487,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _TextStyling_Italic__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./TextStyling/Italic */ "./resources/js/modules/tools/TextStyling/Italic.js");
 /* harmony import */ var _TextStyling_Strikethrough__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./TextStyling/Strikethrough */ "./resources/js/modules/tools/TextStyling/Strikethrough.js");
 /* harmony import */ var _TextStyling_Underline__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./TextStyling/Underline */ "./resources/js/modules/tools/TextStyling/Underline.js");
-/* harmony import */ var _CodeBlock__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./CodeBlock */ "./resources/js/modules/tools/CodeBlock.js");
-/* harmony import */ var _TextAlignment_AlignCenter__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./TextAlignment/AlignCenter */ "./resources/js/modules/tools/TextAlignment/AlignCenter.js");
-/* harmony import */ var _TextAlignment_AlignLeft__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./TextAlignment/AlignLeft */ "./resources/js/modules/tools/TextAlignment/AlignLeft.js");
-/* harmony import */ var _TextAlignment_AlignRight__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./TextAlignment/AlignRight */ "./resources/js/modules/tools/TextAlignment/AlignRight.js");
-/* harmony import */ var _Image__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./Image */ "./resources/js/modules/tools/Image.js");
-/* harmony import */ var _OrderedList__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./OrderedList */ "./resources/js/modules/tools/OrderedList.js");
-/* harmony import */ var _BulletList__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./BulletList */ "./resources/js/modules/tools/BulletList.js");
-/* harmony import */ var _Table__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./Table */ "./resources/js/modules/tools/Table.js");
-/* harmony import */ var _Link__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Link */ "./resources/js/modules/tools/Link.js");
-/* harmony import */ var _History_Undo__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./History/Undo */ "./resources/js/modules/tools/History/Undo.js");
-/* harmony import */ var _History_Redo__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./History/Redo */ "./resources/js/modules/tools/History/Redo.js");
+/* harmony import */ var _TextStyling_ClearFormat__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./TextStyling/ClearFormat */ "./resources/js/modules/tools/TextStyling/ClearFormat.js");
+/* harmony import */ var _CodeBlock__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./CodeBlock */ "./resources/js/modules/tools/CodeBlock.js");
+/* harmony import */ var _TextAlignment_AlignCenter__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./TextAlignment/AlignCenter */ "./resources/js/modules/tools/TextAlignment/AlignCenter.js");
+/* harmony import */ var _TextAlignment_AlignLeft__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./TextAlignment/AlignLeft */ "./resources/js/modules/tools/TextAlignment/AlignLeft.js");
+/* harmony import */ var _TextAlignment_AlignRight__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./TextAlignment/AlignRight */ "./resources/js/modules/tools/TextAlignment/AlignRight.js");
+/* harmony import */ var _Image__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./Image */ "./resources/js/modules/tools/Image.js");
+/* harmony import */ var _OrderedList__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./OrderedList */ "./resources/js/modules/tools/OrderedList.js");
+/* harmony import */ var _BulletList__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./BulletList */ "./resources/js/modules/tools/BulletList.js");
+/* harmony import */ var _Table__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./Table */ "./resources/js/modules/tools/Table.js");
+/* harmony import */ var _Link__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./Link */ "./resources/js/modules/tools/Link.js");
+/* harmony import */ var _History_Undo__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./History/Undo */ "./resources/js/modules/tools/History/Undo.js");
+/* harmony import */ var _History_Redo__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./History/Redo */ "./resources/js/modules/tools/History/Redo.js");
+
 
 
 
@@ -7498,21 +7527,22 @@ __webpack_require__.r(__webpack_exports__);
   heading2: _Headings_Heading2__WEBPACK_IMPORTED_MODULE_2__["default"],
   heading3: _Headings_Heading3__WEBPACK_IMPORTED_MODULE_3__["default"],
   blockquote: _Blockquote__WEBPACK_IMPORTED_MODULE_5__["default"],
-  codeBlock: _CodeBlock__WEBPACK_IMPORTED_MODULE_10__["default"],
-  image: _Image__WEBPACK_IMPORTED_MODULE_14__["default"],
-  table: _Table__WEBPACK_IMPORTED_MODULE_17__["default"],
+  codeBlock: _CodeBlock__WEBPACK_IMPORTED_MODULE_11__["default"],
+  image: _Image__WEBPACK_IMPORTED_MODULE_15__["default"],
+  table: _Table__WEBPACK_IMPORTED_MODULE_18__["default"],
   bold: _TextStyling_Bold__WEBPACK_IMPORTED_MODULE_6__["default"],
   italic: _TextStyling_Italic__WEBPACK_IMPORTED_MODULE_7__["default"],
   underline: _TextStyling_Underline__WEBPACK_IMPORTED_MODULE_9__["default"],
+  clearFormat: _TextStyling_ClearFormat__WEBPACK_IMPORTED_MODULE_10__["default"],
   strikethrough: _TextStyling_Strikethrough__WEBPACK_IMPORTED_MODULE_8__["default"],
-  alignCenter: _TextAlignment_AlignCenter__WEBPACK_IMPORTED_MODULE_11__["default"],
-  alignLeft: _TextAlignment_AlignLeft__WEBPACK_IMPORTED_MODULE_12__["default"],
-  alignRight: _TextAlignment_AlignRight__WEBPACK_IMPORTED_MODULE_13__["default"],
-  orderedList: _OrderedList__WEBPACK_IMPORTED_MODULE_15__["default"],
-  bulletList: _BulletList__WEBPACK_IMPORTED_MODULE_16__["default"],
-  link: _Link__WEBPACK_IMPORTED_MODULE_18__["default"],
-  undo: _History_Undo__WEBPACK_IMPORTED_MODULE_19__["default"],
-  redo: _History_Redo__WEBPACK_IMPORTED_MODULE_20__["default"],
+  alignCenter: _TextAlignment_AlignCenter__WEBPACK_IMPORTED_MODULE_12__["default"],
+  alignLeft: _TextAlignment_AlignLeft__WEBPACK_IMPORTED_MODULE_13__["default"],
+  alignRight: _TextAlignment_AlignRight__WEBPACK_IMPORTED_MODULE_14__["default"],
+  orderedList: _OrderedList__WEBPACK_IMPORTED_MODULE_16__["default"],
+  bulletList: _BulletList__WEBPACK_IMPORTED_MODULE_17__["default"],
+  link: _Link__WEBPACK_IMPORTED_MODULE_19__["default"],
+  undo: _History_Undo__WEBPACK_IMPORTED_MODULE_20__["default"],
+  redo: _History_Redo__WEBPACK_IMPORTED_MODULE_21__["default"],
   // Visual divider between tools, has a shorthand representation of '|'.
   separator: _Separator__WEBPACK_IMPORTED_MODULE_4__["default"],
   '|': _Separator__WEBPACK_IMPORTED_MODULE_4__["default"]
@@ -39311,6 +39341,40 @@ function render(_ctx, _cache) {
 
 /***/ }),
 
+/***/ "./node_modules/@heroicons/vue/24/outline/esm/NoSymbolIcon.js":
+/*!********************************************************************!*\
+  !*** ./node_modules/@heroicons/vue/24/outline/esm/NoSymbolIcon.js ***!
+  \********************************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (/* binding */ render)
+/* harmony export */ });
+/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "vue");
+
+
+function render(_ctx, _cache) {
+  return ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M18.364 18.364A9 9 0 0 0 5.636 5.636m12.728 12.728A9 9 0 0 1 5.636 5.636m12.728 12.728L5.636 5.636"
+    })
+  ]))
+}
+
+/***/ }),
+
 /***/ "./node_modules/@heroicons/vue/24/outline/esm/NumberedListIcon.js":
 /*!************************************************************************!*\
   !*** ./node_modules/@heroicons/vue/24/outline/esm/NumberedListIcon.js ***!

diff --git a/resources/js/components/Tools/Link.vue b/resources/js/components/Tools/Link.vue
@@ -18,7 +18,6 @@
 </template>
 
 <script>
-import tippy from 'tippy.js'
 import BaseTool from './BaseTool'
 import { LinkIcon } from '@heroicons/vue/24/outline'
 import InsertLink from '../Modals/InsertLink.vue'

diff --git a/resources/js/components/Tools/Separator.vue b/resources/js/components/Tools/Separator.vue
@@ -1,3 +1,3 @@
 <template>
-    <div class="text-gray-200 dark:text-gray-600 font-light px-2 text-lg">|</div>
+    <div class="text-gray-200 dark:text-gray-600 font-light text-lg">|</div>
 </template>
diff --git a/resources/js/modules/tools/TextStyling/ClearFormat.js b/resources/js/modules/tools/TextStyling/ClearFormat.js
@@ -0,0 +1,13 @@
+import { NoSymbolIcon } from '@heroicons/vue/24/outline'
+import Standard from '../../../components/Tools/Standard.vue'
+
+export default {
+    icon: NoSymbolIcon,
+    component: Standard,
+    apply (editor) {
+        editor.chain().focus().unsetAllMarks().run()
+    },
+    active (editor) {
+        return false
+    }
+}
diff --git a/resources/js/modules/tools/index.js b/resources/js/modules/tools/index.js
@@ -8,6 +8,7 @@ import Bold from './TextStyling/Bold'
 import Italic from './TextStyling/Italic'
 import Strikethrough from './TextStyling/Strikethrough'
 import Underline from './TextStyling/Underline'
+import ClearFormat from './TextStyling/ClearFormat'
 import CodeBlock from './CodeBlock'
 import AlignCenter from './TextAlignment/AlignCenter'
 import AlignLeft from './TextAlignment/AlignLeft'
@@ -32,6 +33,7 @@ export default {
     bold: Bold,
     italic: Italic,
     underline: Underline,
+    clearFormat: ClearFormat,
     strikethrough: Strikethrough,
     alignCenter: AlignCenter,
     alignLeft: AlignLeft,

diff --git a/resources/scss/field.scss b/resources/scss/field.scss
@@ -31,4 +31,12 @@
     .format-dropdown:focus {
         outline-color: rgba(var(--colors-primary-600));
     }
+
+    // Header (Editor toolbar)
+    &-header {
+        &.top-sticky {
+            border-radius: 0;
+            box-shadow: none;
+        }
+    }
 }