feat: extract WysiwygEditor into reusable component and add advanced formatting options

2026-05-07 08:12:28 +02:00
parent d19fd266c7
commit 0c94e7b999
6 changed files with 357 additions and 77 deletions
@@ -24,6 +24,112 @@ body {
 }

 /* Fix for font size in Ant Design components */
+/* ── Tiptap / ProseMirror Word-style editor ──────────────────── */
+.pm-editor-wrap {
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.pm-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #d9d9d9;
+  flex-wrap: wrap;
+  user-select: none;
+}
+
+.pm-tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  background: transparent;
+  color: #333;
+  font-size: 14px;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 0.1s, border-color 0.1s, color 0.1s;
+}
+
+.pm-tool-btn:hover:not(:disabled) {
+  background: #e0e0e0;
+  border-color: #bbb;
+}
+
+.pm-tool-btn--active {
+  background: #d6e4ff !important;
+  border-color: #91caff !important;
+  color: #1677ff !important;
+}
+
+.pm-tool-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.pm-tool-divider {
+  display: inline-block;
+  width: 1px;
+  height: 20px;
+  background: #d0d0d0;
+  margin: 0 4px;
+  flex-shrink: 0;
+}
+
+.pm-document-surround {
+  background: #e0e0e0;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.pm-document-page {
+  background: #fff;
+  padding: 28px 36px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+  font-family: 'Calibri', 'Segoe UI', Arial, sans-serif;
+}
+
+.ProseMirror {
+  outline: none;
+  font-size: 11pt;
+  line-height: 1.6;
+  color: #222;
+}
+
+.ProseMirror > * + * {
+  margin-top: 0.6em;
+}
+
+.ProseMirror h1 { font-size: 2em; font-weight: 700; line-height: 1.2; }
+.ProseMirror h2 { font-size: 1.5em; font-weight: 700; line-height: 1.25; }
+.ProseMirror h3 { font-size: 1.17em; font-weight: 600; line-height: 1.3; }
+
+.ProseMirror ul,
+.ProseMirror ol {
+  padding-left: 1.5em;
+}
+
+.ProseMirror ul { list-style-type: disc; }
+.ProseMirror ol { list-style-type: decimal; }
+
+.ProseMirror blockquote {
+  border-left: 3px solid #ccc;
+  padding-left: 1em;
+  color: #555;
+  font-style: italic;
+  margin: 0;
+}
+
+/* ─────────────────────────────────────────────────────────────── */
+
 .ant-select,
 .ant-select-selection-search-input,
 .ant-select-item,