px-react-ui-components 1.1.9 → 1.1.11

package/dist/components/__yedek/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;
+}

package/dist/components/__yedek/MyEditor copy/MyEditor.js

@@ -0,0 +1,368 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./MyEditor.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Opsiyonel bağımlılıkları kontrol et
+let ReactQuill, Quill, ImageResize, QuillTable, katex;
+let hasQuillDependencies = false;
+try {
+  ReactQuill = require("react-quill");
+  require("react-quill/dist/quill.snow.css");
+  Quill = require("quill");
+  ImageResize = require("quill-image-resize");
+  QuillTable = require("quill-table");
+  katex = require("katex");
+  require("katex/dist/katex.min.css");
+  hasQuillDependencies = true;
+} catch (error) {
+  console.warn("MyEditor: Quill bağımlılıkları bulunamadı. MyEditor bileşenini kullanmak için aşağıdaki paketleri yükleyin:", {
+    "react-quill": "^2.0.0",
+    "quill": "^1.3.7",
+    "quill-image-resize-module-react": "^3.0.0",
+    "quill-table-ui": "^1.0.7",
+    "katex": "^0.16.21"
+  });
+}
+
+// Ö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 bağımlılıkları varsa konfigürasyonu yap
+if (hasQuillDependencies) {
+  // KaTeX'i global hale getir
+  if (katex) {
+    window.katex = katex;
+  }
+
+  // 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
+  if (ImageResize) {
+    Quill.register("modules/imageResize", ImageResize);
+  }
+  if (QuillTable) {
+    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
+  if (katex) {
+    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] = (0, _react.useState)("");
+  const [isFullscreen, setIsFullscreen] = (0, _react.useState)(false);
+  const editorRef = (0, _react.useRef)(null);
+  const timeoutRef = (0, _react.useRef)(null);
+  const isFirstRender = (0, _react.useRef)(true);
+
+  // Bağımlılıklar yoksa uyarı göster
+  if (!hasQuillDependencies) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        padding: "20px",
+        border: "2px dashed #ff6b6b",
+        borderRadius: "8px",
+        backgroundColor: "#fff5f5",
+        color: "#d63031",
+        textAlign: "center",
+        ...style
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+        children: "MyEditor Bile\u015Feni Kullan\u0131lam\u0131yor"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+        children: "Bu bile\u015Feni kullanmak i\xE7in a\u015Fa\u011F\u0131daki paketleri y\xFCklemeniz gerekiyor:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+        style: {
+          backgroundColor: "#f8f9fa",
+          padding: "10px",
+          borderRadius: "4px",
+          fontSize: "12px",
+          textAlign: "left",
+          overflow: "auto"
+        },
+        children: `npm install react-quill quill quill-image-resize-module-react quill-table-ui katex`
+      })]
+    });
+  }
+  const handleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+
+  // Custom buton tanımı
+  (0, _react.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>`;
+  }, []);
+  (0, _react.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,
+        target: {
+          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__*/(0, _jsxRuntime.jsx)("div", {
+    className: 'myEditorContainer ' + (isFullscreen ? 'fullscreen' : ''),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "myEditorContainerContent",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        onClick: handleFullscreen,
+        className: "myEditorContainerFullscreenButton",
+        title: isFullscreen ? "Minimize" : "Maximize",
+        children: isFullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+          viewBox: "0 0 18 18",
+          width: "18",
+          height: "18",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+            d: "M4,4h2v6H0V8h4V4z M14,4v4h4v2h-6V4H14z M6,14H4v-4H0v-2h6V14z M14,14h-2v-6h6v2h-4V14z"
+          })
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+          viewBox: "0 0 18 18",
+          width: "18",
+          height: "18",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+            d: "M4,4H0v2h6V0H4V4z M14,4V0h-2v6h6V4H14z M6,14H0v2h4v4h2V14z M14,18h2v-4h4v-2h-6V18z"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactQuill, {
+        ref: editorRef,
+        theme: "snow",
+        value: editorValue,
+        onChange: handleChange,
+        modules: modules,
+        formats: formats,
+        style: style,
+        preserveWhitespace: true
+      })]
+    })
+  });
+}
+var _default = exports.default = MyEditor;