px-react-ui-components 1.0.0

package/dist/components/MyEditor/MyEditor.js

@@ -0,0 +1,292 @@
+import React, { useState, useEffect, useRef } from "react";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import ImageResize from "quill-image-resize";
+import Quill from "quill";
+import QuillTable from "quill-table";
+import katex from "katex";
+import "katex/dist/katex.min.css";
+import "./MyEditor.scss";
+
+// KaTeX'i global hale getir
+window.katex = katex;
+
+// Özel font listesini tanımla
+const fonts = [{
+  label: "Arial",
+  value: "arial"
+}, {
+  label: "Comic Sans MS",
+  value: "comic-sans"
+}, {
+  label: "Courier New",
+  value: "courier-new"
+}, {
+  label: "Georgia",
+  value: "georgia"
+}, {
+  label: "Helvetica",
+  value: "helvetica"
+}, {
+  label: "Times New Roman",
+  value: "times-new-roman"
+}, {
+  label: "Verdana",
+  value: "verdana"
+}, {
+  label: "Trebuchet MS",
+  value: "trebuchet-ms"
+}, {
+  label: "Garamond",
+  value: "garamond"
+}, {
+  label: "Palatino Linotype",
+  value: "palatino-linotype"
+}, {
+  label: "Consolas",
+  value: "consolas"
+}, {
+  label: "Lucida Console",
+  value: "lucida-console"
+}, {
+  label: "Impact",
+  value: "impact"
+}, {
+  label: "Brush Script MT",
+  value: "brush-script-mt"
+}, {
+  label: "Tahoma",
+  value: "tahoma"
+}, {
+  label: "Gill Sans",
+  value: "gill-sans"
+}, {
+  label: "Franklin Gothic Medium",
+  value: "franklin-gothic-medium"
+}, {
+  label: "Century Gothic",
+  value: "century-gothic"
+}, {
+  label: "Bookman Old Style",
+  value: "bookman-old-style"
+}, {
+  label: "Candara",
+  value: "candara"
+}, {
+  label: "Didot",
+  value: "didot"
+}, {
+  label: "Futura",
+  value: "futura"
+}, {
+  label: "Rockwell",
+  value: "rockwell"
+}, {
+  label: "Baskerville",
+  value: "baskerville"
+}, {
+  label: "Bodoni MT",
+  value: "bodoni-mt"
+}, {
+  label: "Copperplate",
+  value: "copperplate"
+}, {
+  label: "Perpetua",
+  value: "perpetua"
+}, {
+  label: "Monaco",
+  value: "monaco"
+}, {
+  label: "Century Schoolbook",
+  value: "century-schoolbook"
+}, {
+  label: "Segoe UI",
+  value: "segoe-ui"
+}];
+
+// Quill font formatını genişlet
+const Font = Quill.import("formats/font");
+Font.whitelist = fonts.map(f => f.value);
+Quill.register(Font, true);
+
+// Quill modüllerini kaydet
+Quill.register("modules/imageResize", ImageResize);
+Quill.register(QuillTable.TableCell);
+Quill.register(QuillTable.TableRow);
+Quill.register(QuillTable.Table);
+Quill.register(QuillTable.Contain);
+Quill.register("modules/table", QuillTable.TableModule);
+
+// Formula Embed için düzeltme
+const Embed = Quill.import("blots/embed");
+class FormulaEmbed extends Embed {
+  static create(value) {
+    let node = super.create();
+    if (value) {
+      node.setAttribute("data-value", value);
+      try {
+        window.katex.render(value, node, {
+          throwOnError: false
+        });
+      } catch (err) {
+        console.error("KaTeX render error:", err);
+      }
+    }
+    return node;
+  }
+  static value(node) {
+    return node.getAttribute("data-value");
+  }
+}
+FormulaEmbed.blotName = "formula";
+FormulaEmbed.tagName = "SPAN";
+FormulaEmbed.className = "ql-formula";
+Quill.register("formats/formula", FormulaEmbed);
+function MyEditor({
+  value,
+  onChange,
+  style = {
+    height: "300px"
+  }
+}) {
+  const [editorValue, setEditorValue] = useState("");
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const editorRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const isFirstRender = useRef(true);
+  const handleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+
+  // Custom buton tanımı
+  useEffect(() => {
+    const icons = Quill.import('ui/icons');
+    icons['fullscreen'] = `<svg viewbox="0 0 18 18">
+      <path d="M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z"/>
+    </svg>`;
+  }, []);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      setEditorValue(value || "");
+    } else if (value !== editorValue) {
+      const editor = editorRef.current?.getEditor();
+      if (editor) {
+        editor.setContents(editor.clipboard.convert(value || ""));
+      }
+    }
+  }, [value]);
+  const handleChange = (content, delta, source, editor) => {
+    const html = editor.getHTML();
+    setEditorValue(html);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      if (onChange) onChange({
+        value: html
+      });
+    }, 500);
+  };
+  const formats = ["header", "font", "size", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet", "indent", "link", "image", "color", "background", "align", "script", "table", "table-cell", "table-row", "table-header", "table-body", "formula"];
+  const maxRows = 10;
+  const maxCols = 5;
+  const tableOptions = [];
+  for (let r = 1; r <= maxRows; r++) {
+    for (let c = 1; c <= maxCols; c++) {
+      tableOptions.push("newtable_" + r + "_" + c);
+    }
+  }
+  const modules = {
+    toolbar: {
+      container: [[{
+        font: fonts.map(f => f.value)
+      }], [{
+        header: [1, 2, 3, 4, 5, 6, false]
+      }], [{
+        size: ["small", "normal", "large", "huge"]
+      }], [{
+        list: "ordered"
+      }, {
+        list: "bullet"
+      }], ["bold", "italic", "underline", "strike"], [{
+        align: []
+      }], [{
+        color: []
+      }, {
+        background: []
+      }], [{
+        script: "sub"
+      }, {
+        script: "super"
+      }], ["image"]
+      // [{ table: tableOptions }, { table: "append-row" }, { table: "append-col" }],
+      // ["formula"]
+      ]
+    },
+    table: {
+      operationMenu: true,
+      resizable: true,
+      tableCellMinWidth: 50,
+      tableHeaderRows: 1
+    },
+    clipboard: {
+      matchVisual: false
+    },
+    imageResize: {
+      modules: ["Resize", "DisplaySize"],
+      displaySize: true,
+      handleStyles: {
+        backgroundColor: '#000',
+        border: 'none',
+        color: '#fff'
+      }
+    }
+  };
+
+  // Font adlarını gerçek isimleriyle göstermek için toolbar'ı güncelle
+  const fontPicker = document.querySelector(".ql-font");
+  if (fontPicker) {
+    const items = fontPicker.querySelectorAll(".ql-picker-item");
+    items.forEach((item, index) => {
+      if (fonts[index]) {
+        item.innerText = fonts[index].label; // Gerçek font adını göster
+      }
+    });
+    const pickerLabel = fontPicker.querySelector(".ql-picker-label");
+    if (pickerLabel) {
+      pickerLabel.innerText = fonts[0].label; // Varsayılan font ismi
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'myEditorContainer ' + (isFullscreen ? 'fullscreen' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "myEditorContainerContent"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: handleFullscreen,
+    className: "myEditorContainerFullscreenButton",
+    title: isFullscreen ? "Minimize" : "Maximize"
+  }, isFullscreen ? /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 18 18",
+    width: "18",
+    height: "18"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4,4h2v6H0V8h4V4z M14,4v4h4v2h-6V4H14z M6,14H4v-4H0v-2h6V14z M14,14h-2v-6h6v2h-4V14z"
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 18 18",
+    width: "18",
+    height: "18"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z"
+  }))), /*#__PURE__*/React.createElement(ReactQuill, {
+    ref: editorRef,
+    theme: "snow",
+    value: editorValue,
+    onChange: handleChange,
+    modules: modules,
+    formats: formats,
+    style: style,
+    preserveWhitespace: true
+  })));
+}
+export default MyEditor;

package/dist/components/MyEditor/MyEditor.scss

@@ -0,0 +1,277 @@
+.myEditorContainer {
+    &.fullscreen {
+        position: fixed;
+        z-index: 9999;
+        background: white;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #091624c0;
+
+        .myEditorContainerContent {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            height: 90vh;
+            width: 95%;
+            background: #fff;
+            border-radius: 10px;
+            padding: 10px;
+
+            .myEditorContainerFullscreenButton{
+                right: 15px;
+                top: 15px;
+                background: #7096b1;
+            }
+
+            .quill {
+                height: calc(100% - 45px) !important;
+            }
+        }
+    }
+
+    .myEditorContainerContent {
+        position: relative;
+        height: 100%;
+        width: 100%;
+
+        .myEditorContainerFullscreenButton{
+            position: absolute;
+            right: 5px;
+            top: 5px;
+            z-index: 10000;
+            background: #b8c1cf;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 33px;
+            height: 33px;
+            padding: 7px;
+            border-radius: 5px;
+
+            svg{
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .quill {
+            display: inline-block;
+            width: 100%;
+
+            .ql-toolbar {
+                border-radius: 10px;
+                background: #eaebec;
+                // -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
+                // -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
+                box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
+                padding: 3px !important;
+
+                .ql-formats {
+                    margin: 4px;
+                    background: #d9dce1;
+                    padding: 2px;
+                    border-radius: 5px;
+                }
+            }
+
+            .ql-container {
+                border-radius: 0 0 10px 10px;
+                padding-right: 2px;
+            }
+
+            .ql-editor {
+                &::-webkit-scrollbar {
+                    width: 8px;
+                    height: 8px;
+                }
+
+                &::-webkit-scrollbar-track {
+                    background: #f1f1f1;
+                    border-radius: 4px;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background: #888;
+                    border-radius: 4px;
+
+                    &:hover {
+                        background: #555;
+                    }
+                }
+            }
+        }
+
+        .quill-editor-container .ql-formula {
+            display: inline-block;
+            vertical-align: middle;
+            padding: 0 2px;
+        }
+
+        .quill-editor-container .katex {
+            display: inline-block;
+            font-size: 1.1em;
+        }
+
+        .ql-snow .ql-picker.ql-font .ql-picker-label::before,
+        .ql-snow .ql-picker.ql-font .ql-picker-item::before {
+            content: "";
+        }
+
+        .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+            overflow: auto;
+            max-height: 300px;
+        }
+
+        .ql-font-arial {
+            font-family: Arial, sans-serif !important;
+        }
+
+        .ql-font-comic-sans {
+            font-family: "Comic Sans MS", cursive, sans-serif !important;
+        }
+
+        .ql-font-courier-new {
+            font-family: "Courier New", Courier, monospace !important;
+        }
+
+        .ql-font-georgia {
+            font-family: Georgia, serif !important;
+        }
+
+        .ql-font-helvetica {
+            font-family: Helvetica, sans-serif !important;
+        }
+
+        .ql-font-times-new-roman {
+            font-family: "Times New Roman", Times, serif !important;
+        }
+
+        .ql-font-verdana {
+            font-family: Verdana, sans-serif !important;
+        }
+
+        .ql-font-trebuchet-ms {
+            font-family: "Trebuchet MS", sans-serif !important;
+        }
+
+        .ql-font-garamond {
+            font-family: Garamond, serif !important;
+        }
+
+        .ql-font-palatino-linotype {
+            font-family: "Palatino Linotype", serif !important;
+        }
+
+        .ql-font-consolas {
+            font-family: Consolas, monospace !important;
+        }
+
+        .ql-font-lucida-console {
+            font-family: "Lucida Console", monospace !important;
+        }
+
+        .ql-font-impact {
+            font-family: Impact, sans-serif !important;
+        }
+
+        .ql-font-brush-script-mt {
+            font-family: "Brush Script MT", cursive !important;
+        }
+
+        .ql-font-tahoma {
+            font-family: Tahoma, sans-serif !important;
+        }
+
+        .ql-font-gill-sans {
+            font-family: "Gill Sans", sans-serif !important;
+        }
+
+        .ql-font-franklin-gothic-medium {
+            font-family: "Franklin Gothic Medium", sans-serif !important;
+        }
+
+        .ql-font-century-gothic {
+            font-family: "Century Gothic", sans-serif !important;
+        }
+
+        .ql-font-bookman-old-style {
+            font-family: "Bookman Old Style", serif !important;
+        }
+
+        .ql-font-candara {
+            font-family: Candara, sans-serif !important;
+        }
+
+        .ql-font-didot {
+            font-family: Didot, serif !important;
+        }
+
+        .ql-font-futura {
+            font-family: Futura, sans-serif !important;
+        }
+
+        .ql-font-rockwell {
+            font-family: Rockwell, serif !important;
+        }
+
+        .ql-font-baskerville {
+            font-family: Baskerville, serif !important;
+        }
+
+        .ql-font-bodoni-mt {
+            font-family: "Bodoni MT", serif !important;
+        }
+
+        .ql-font-copperplate {
+            font-family: Copperplate, serif !important;
+        }
+
+        .ql-font-perpetua {
+            font-family: Perpetua, serif !important;
+        }
+
+        .ql-font-monaco {
+            font-family: Monaco, monospace !important;
+        }
+
+        .ql-font-century-schoolbook {
+            font-family: "Century Schoolbook", serif !important;
+        }
+
+        .ql-font-segoe-ui {
+            font-family: "Segoe UI", sans-serif !important;
+        }
+
+        .ql-snow .ql-toolbar button.ql-fullscreen {
+            &:hover .ql-stroke {
+                stroke: #06c;
+            }
+
+            .ql-stroke {
+                stroke: #444;
+            }
+        }
+    }
+}
+
+
+.ql-editor table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.ql-editor table td,
+.ql-editor table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+}
+
+.ql-editor table th {
+    background-color: #f2f2f2;
+    text-align: left;
+}