px-react-ui-components 1.0.1 → 1.0.3

package/src/components/MyEditor/MyEditor.jsx

@@ -1,252 +0,0 @@
-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 (
-    <div className={'myEditorContainer ' + (isFullscreen ? 'fullscreen' : '')}>
-      <div className="myEditorContainerContent">
-        <button
-          onClick={handleFullscreen}
-          className="myEditorContainerFullscreenButton"
-          title={isFullscreen ? "Minimize" : "Maximize"}
-        >
-          {isFullscreen ? (
-            <svg viewBox="0 0 18 18" width="18" height="18">
-              <path d="M4,4h2v6H0V8h4V4z M14,4v4h4v2h-6V4H14z M6,14H4v-4H0v-2h6V14z M14,14h-2v-6h6v2h-4V14z" />
-            </svg>
-          ) : (
-            <svg viewBox="0 0 18 18" width="18" height="18">
-              <path d="M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z" />
-            </svg>
-          )}
-        </button>
-        <ReactQuill
-          ref={editorRef}
-          theme="snow"
-          value={editorValue}
-          onChange={handleChange}
-          modules={modules}
-          formats={formats}
-          style={style}
-          preserveWhitespace={true}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default MyEditor;

package/src/components/MyEditor/MyEditor.scss

@@ -1,277 +0,0 @@
-.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;
-}