px-react-ui-components 1.0.0

package/src/components/MyContainer/MyContainer.module.css

@@ -0,0 +1,110 @@
+.container {
+    position: relative;
+    display: block;
+    width: 100%;
+    background: #ffff;
+    border-radius: 15px;
+}
+
+.header {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 15px;
+    padding-left: 20px;
+    padding-bottom: 7.5px;
+    border-bottom: 1px solid #d0d6de;
+    color: #464255;
+}
+
+.title {
+    margin: 0px !important;
+}
+
+.description {
+    font-size: 12px;
+}
+
+.rightBlock {
+    position: absolute;
+    right: 15px;
+    z-index: 2;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.rightBlock button {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-items: center;
+    align-items: center;
+    padding: 10px 15px;
+}
+
+.body {
+    display: block;
+    width: 100%;
+    padding: 15px;
+}
+
+.footer {
+    display: block;
+    width: 100%;
+    padding: 15px;
+    border-top: 1px solid #d0d6de;
+}
+
+@media screen and (max-width: 768px) {
+    .header {
+        padding: 10px;
+        padding-left: 15px;
+        padding-bottom: 5px;
+    }
+
+    .rightBlock {
+        position: relative;
+        right: auto;
+        top: auto;
+        transform: none;
+        margin-top: 10px;
+        justify-content: flex-end;
+    }
+
+    .rightBlock button {
+        padding: 8px 12px;
+        font-size: 14px;
+    }
+
+    .body {
+        padding: 10px;
+    }
+
+    .footer {
+        padding: 10px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .header {
+        padding: 8px;
+        padding-left: 12px;
+        padding-bottom: 4px;
+    }
+
+    .rightBlock button {
+        padding: 6px 10px;
+        font-size: 12px;
+    }
+
+    .body {
+        padding: 8px;
+    }
+
+    .footer {
+        padding: 8px;
+    }
+}

package/src/components/MyContainer/MyContainerBody.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+function MyContainerBody({ children }) {
+  return (
+    <div className="MyContainerTagBody">{children}</div>
+  )
+}
+export default MyContainerBody

package/src/components/MyContainer/MyContainerFooter.jsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+function MyContainerFooter({ children }) {
+  return (
+    <div className="MyContainerTagFooter">{children}</div>
+  )
+}
+export default MyContainerFooter

package/src/components/MyContainer/MyContainerRight.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./MyContainer.module.css";
+
+function MyContainerRight({ children }) {
+    return (
+        <div className={"MyContainerTagRight " + styles.rightBlock}>
+            {children}
+        </div>
+    );
+}
+export default MyContainerRight;

package/src/components/MyEditor/MyEditor.jsx

@@ -0,0 +1,252 @@
+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

@@ -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;
+}