@overlap/rte 0.1.2 → 0.1.4

package/src/styles.css

@@ -1,638 +0,0 @@
-/* CSS Variables für Theme-Support */
-:root {
-  /* Colors */
-  --rte-border-color: #e5e7eb;
-  --rte-border-radius: 8px;
-  --rte-toolbar-bg: #f9fafb;
-  --rte-button-hover-bg: #f3f4f6;
-  --rte-button-active-bg: #e5e7eb;
-  --rte-content-bg: #ffffff;
-  --rte-text-color: #111827;
-  --rte-text-secondary: #6b7280;
-  --rte-primary-color: #3b82f6;
-  --rte-primary-hover: #2563eb;
-  
-  /* Spacing */
-  --rte-padding-xs: 4px;
-  --rte-padding-sm: 6px;
-  --rte-padding-md: 8px;
-  --rte-padding-lg: 12px;
-  --rte-padding-xl: 16px;
-  --rte-padding-2xl: 20px;
-  
-  /* Shadows */
-  --rte-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --rte-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --rte-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --rte-shadow-popover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  
-  /* Typography */
-  --rte-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  --rte-line-height: 1.6;
-}
-
-/* Container */
-.rte-container {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--rte-border-color);
-  border-radius: var(--rte-border-radius);
-  background: var(--rte-content-bg);
-  font-family: var(--rte-font-family);
-  box-shadow: var(--rte-shadow-sm);
-}
-
-/* Toolbar */
-.rte-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--rte-padding-md);
-  padding: var(--rte-padding-md);
-  background: var(--rte-toolbar-bg);
-  border-bottom: 1px solid var(--rte-border-color);
-  border-top-left-radius: var(--rte-border-radius);
-  border-top-right-radius: var(--rte-border-radius);
-}
-
-/* Sticky Toolbar */
-.rte-toolbar-sticky {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  box-shadow: var(--rte-shadow-sm);
-  transition: box-shadow 0.2s ease;
-}
-
-.rte-toolbar-left {
-  display: flex;
-  gap: var(--rte-padding-xs);
-  flex-wrap: wrap;
-  align-items: center;
-  flex: 1;
-}
-
-.rte-toolbar-right {
-  display: flex;
-  gap: var(--rte-padding-xs);
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* Toolbar Divider */
-.rte-toolbar-divider {
-  width: 1px;
-  height: 24px;
-  background: var(--rte-border-color);
-  margin: 0 var(--rte-padding-sm);
-  flex-shrink: 0;
-}
-
-/* Toolbar Buttons - Ghost/Subtle Style */
-.rte-toolbar-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 32px;
-  height: 32px;
-  padding: 0 var(--rte-padding-md);
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--rte-text-color);
-  transition: all 0.15s ease;
-  font-size: 14px;
-}
-
-.rte-toolbar-button:hover:not(:disabled) {
-  background: var(--rte-button-hover-bg);
-  color: var(--rte-text-color);
-}
-
-.rte-toolbar-button:active:not(:disabled) {
-  background: var(--rte-button-active-bg);
-  transform: scale(0.98);
-}
-
-.rte-toolbar-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.rte-toolbar-button-active {
-  background: var(--rte-button-active-bg);
-  color: var(--rte-primary-color);
-}
-
-.rte-toolbar-button-active:hover:not(:disabled) {
-  background: var(--rte-button-hover-bg);
-  color: var(--rte-primary-hover);
-}
-
-/* Editor Content Area */
-.rte-editor {
-  min-height: 200px;
-  padding: var(--rte-padding-2xl);
-  outline: none;
-  line-height: var(--rte-line-height);
-  color: var(--rte-text-color);
-  overflow-y: auto;
-  background: var(--rte-content-bg);
-  border-bottom-left-radius: var(--rte-border-radius);
-  border-bottom-right-radius: var(--rte-border-radius);
-}
-
-.rte-editor:focus {
-  outline: none;
-}
-
-.rte-editor:empty:before {
-  content: attr(data-placeholder);
-  color: var(--rte-text-secondary);
-  pointer-events: none;
-}
-
-/* Typography in Editor */
-.rte-editor p {
-  margin: 0 0 var(--rte-padding-lg) 0;
-}
-
-.rte-editor p:last-child {
-  margin-bottom: 0;
-}
-
-.rte-editor h1 {
-  font-size: 2em;
-  font-weight: 700;
-  margin: 0 0 var(--rte-padding-lg) 0;
-  line-height: 1.2;
-}
-
-.rte-editor h2 {
-  font-size: 1.5em;
-  font-weight: 600;
-  margin: 0 0 var(--rte-padding-lg) 0;
-  line-height: 1.3;
-}
-
-.rte-editor h3 {
-  font-size: 1.25em;
-  font-weight: 600;
-  margin: 0 0 var(--rte-padding-lg) 0;
-  line-height: 1.4;
-}
-
-.rte-editor h4 {
-  font-size: 1.1em;
-  font-weight: 600;
-  margin: 0 0 var(--rte-padding-lg) 0;
-  line-height: 1.4;
-}
-
-.rte-editor h5 {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 0 0 var(--rte-padding-lg) 0;
-  line-height: 1.5;
-}
-
-.rte-editor h6 {
-  font-size: 0.9em;
-  font-weight: 600;
-  margin: 0 0 var(--rte-padding-lg) 0;
-  line-height: 1.5;
-}
-
-.rte-editor blockquote {
-  margin: 0 0 var(--rte-padding-lg) 0;
-  padding: var(--rte-padding-lg) var(--rte-padding-xl);
-  border-left: 3px solid var(--rte-border-color);
-  background: var(--rte-toolbar-bg);
-  color: var(--rte-text-secondary);
-  border-radius: 0 var(--rte-border-radius) var(--rte-border-radius) 0;
-}
-
-.rte-editor ul,
-.rte-editor ol {
-  margin: 0 0 var(--rte-padding-lg) 0;
-  padding-left: var(--rte-padding-2xl);
-}
-
-.rte-editor li {
-  margin: var(--rte-padding-sm) 0;
-}
-
-.rte-editor a {
-  color: var(--rte-primary-color);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  transition: color 0.15s ease;
-}
-
-.rte-editor a:hover {
-  color: var(--rte-primary-hover);
-}
-
-.rte-editor strong,
-.rte-editor b {
-  font-weight: 600;
-}
-
-.rte-editor em,
-.rte-editor i {
-  font-style: italic;
-}
-
-.rte-editor u {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-/* Dropdown Styles */
-.rte-dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.rte-dropdown-button {
-  min-width: 32px;
-  width: auto;
-  padding: 0 var(--rte-padding-md);
-}
-
-.rte-dropdown-button-has-value {
-  padding: 0 var(--rte-padding-lg);
-}
-
-.rte-dropdown-value {
-  margin-left: var(--rte-padding-sm);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--rte-text-color);
-}
-
-/* Dropdown Menu - Modern Popover */
-.rte-dropdown-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  background: var(--rte-content-bg);
-  border: 1px solid var(--rte-border-color);
-  border-radius: var(--rte-border-radius);
-  box-shadow: var(--rte-shadow-popover);
-  z-index: 1000;
-  min-width: 180px;
-  max-height: 320px;
-  overflow-y: auto;
-  padding: var(--rte-padding-sm);
-  margin-top: var(--rte-padding-xs);
-}
-
-.rte-dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: var(--rte-padding-md);
-  width: 100%;
-  padding: var(--rte-padding-md) var(--rte-padding-lg);
-  border: none;
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-  color: var(--rte-text-color);
-  font-size: 14px;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-  font-family: var(--rte-font-family);
-  position: relative;
-}
-
-.rte-dropdown-item:hover {
-  background: var(--rte-button-hover-bg);
-}
-
-.rte-dropdown-item-active {
-  background: var(--rte-button-hover-bg);
-  color: var(--rte-text-color);
-  font-weight: 500;
-}
-
-.rte-dropdown-item-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  background: var(--rte-primary-color);
-  border-radius: 0 2px 2px 0;
-}
-
-.rte-dropdown-item-active .rte-dropdown-heading-preview,
-.rte-dropdown-item-active > span:last-child {
-  color: var(--rte-primary-color);
-  font-weight: 600;
-}
-
-.rte-dropdown-color-preview.active {
-  border: 2px solid var(--rte-primary-color);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-/* Color Preview in Dropdown */
-.rte-dropdown-color-preview {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  border: 1px solid var(--rte-border-color);
-  flex-shrink: 0;
-  box-shadow: var(--rte-shadow-sm);
-}
-
-/* Font Size Preview in Dropdown */
-.rte-dropdown-fontsize-preview {
-  display: inline-block;
-  min-width: 40px;
-  text-align: right;
-  font-weight: 500;
-  color: var(--rte-text-secondary);
-}
-
-/* Heading Preview in Dropdown */
-.rte-dropdown-heading-preview {
-  display: inline-flex;
-  align-items: center;
-  min-width: 60px;
-  font-weight: 600;
-  color: var(--rte-text-color);
-  font-size: 14px;
-  line-height: 1.2;
-}
-
-.rte-dropdown-heading-preview.h1 {
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.rte-dropdown-heading-preview.h2 {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.rte-dropdown-heading-preview.h3 {
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.rte-dropdown-heading-preview.h4 {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.rte-dropdown-heading-preview.h5 {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.rte-dropdown-heading-preview.h6 {
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.rte-dropdown-heading-preview.p {
-  font-size: 14px;
-  font-weight: 400;
-}
-
-/* Image Styles in Editor */
-.rte-editor img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: var(--rte-padding-xl) 0;
-  border-radius: var(--rte-border-radius);
-  box-shadow: var(--rte-shadow-sm);
-}
-
-.rte-editor img[data-uploading="true"] {
-  opacity: 0.6;
-  position: relative;
-}
-
-.rte-editor img[data-uploading="true"]::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--rte-primary-color);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-
-/* Image Modal */
-.rte-image-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10000;
-  padding: var(--rte-padding-xl);
-}
-
-.rte-image-modal {
-  background: var(--rte-content-bg);
-  border-radius: var(--rte-border-radius);
-  box-shadow: var(--rte-shadow-lg);
-  width: 100%;
-  max-width: 500px;
-  max-height: 90vh;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.rte-image-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--rte-padding-xl);
-  border-bottom: 1px solid var(--rte-border-color);
-}
-
-.rte-image-modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--rte-text-color);
-}
-
-.rte-image-modal-close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  color: var(--rte-text-secondary);
-  transition: all 0.15s ease;
-}
-
-.rte-image-modal-close:hover {
-  background: var(--rte-button-hover-bg);
-  color: var(--rte-text-color);
-}
-
-.rte-image-modal-content {
-  padding: var(--rte-padding-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--rte-padding-xl);
-}
-
-.rte-image-upload-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rte-padding-md);
-}
-
-.rte-image-upload-label {
-  display: block;
-  cursor: pointer;
-}
-
-.rte-image-upload-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--rte-padding-md);
-  padding: var(--rte-padding-xl);
-  border: 2px dashed var(--rte-border-color);
-  border-radius: var(--rte-border-radius);
-  background: var(--rte-toolbar-bg);
-  color: var(--rte-text-color);
-  transition: all 0.15s ease;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.rte-image-upload-button:hover {
-  border-color: var(--rte-primary-color);
-  background: var(--rte-button-hover-bg);
-}
-
-.rte-image-url-section,
-.rte-image-alt-section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--rte-padding-sm);
-}
-
-.rte-image-url-section label,
-.rte-image-alt-section label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--rte-text-color);
-}
-
-.rte-image-url-input,
-.rte-image-alt-input {
-  width: 100%;
-  padding: var(--rte-padding-md) var(--rte-padding-lg);
-  border: 1px solid var(--rte-border-color);
-  border-radius: 6px;
-  font-size: 14px;
-  font-family: var(--rte-font-family);
-  color: var(--rte-text-color);
-  background: var(--rte-content-bg);
-  transition: all 0.15s ease;
-}
-
-.rte-image-url-input:focus,
-.rte-image-alt-input:focus {
-  outline: none;
-  border-color: var(--rte-primary-color);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.rte-image-preview {
-  display: flex;
-  justify-content: center;
-  padding: var(--rte-padding-lg);
-  background: var(--rte-toolbar-bg);
-  border-radius: var(--rte-border-radius);
-}
-
-.rte-image-preview img {
-  max-width: 100%;
-  max-height: 200px;
-  border-radius: var(--rte-border-radius);
-  box-shadow: var(--rte-shadow-sm);
-}
-
-.rte-image-modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--rte-padding-md);
-  padding: var(--rte-padding-xl);
-  border-top: 1px solid var(--rte-border-color);
-}
-
-.rte-image-modal-cancel,
-.rte-image-modal-insert {
-  padding: var(--rte-padding-md) var(--rte-padding-xl);
-  border: none;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  font-family: var(--rte-font-family);
-}
-
-.rte-image-modal-cancel {
-  background: transparent;
-  color: var(--rte-text-secondary);
-}
-
-.rte-image-modal-cancel:hover {
-  background: var(--rte-button-hover-bg);
-  color: var(--rte-text-color);
-}
-
-.rte-image-modal-insert {
-  background: var(--rte-primary-color);
-  color: white;
-}
-
-.rte-image-modal-insert:hover:not(:disabled) {
-  background: var(--rte-primary-hover);
-}
-
-.rte-image-modal-insert:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.rte-spin {
-  animation: spin 0.8s linear infinite;
-}

package/src/types.ts

@@ -1,95 +0,0 @@
-export interface EditorNode {
-  type: string;
-  children?: EditorNode[];
-  text?: string;
-  attributes?: Record<string, string>;
-}
-
-export interface EditorContent {
-  blocks: EditorNode[];
-}
-
-export interface Plugin {
-  name: string;
-  type: 'inline' | 'block' | 'command';
-  command?: string;
-  renderButton?: (props: ButtonProps & { [key: string]: any }) => React.ReactElement;
-  execute?: (editor: EditorAPI, value?: string) => void;
-  isActive?: (editor: EditorAPI) => boolean;
-  canExecute?: (editor: EditorAPI) => boolean;
-  // State Reflection: Gibt den aktuellen Wert zurück (z.B. "22" für fontSize, "#ff0000" für color, "h1" für heading)
-  getCurrentValue?: (editor: EditorAPI) => string | undefined;
-}
-
-export interface ButtonProps {
-  isActive: boolean;
-  onClick: () => void;
-  disabled?: boolean;
-  icon?: string;
-  label?: string;
-}
-
-export interface EditorAPI {
-  executeCommand: (command: string, value?: string) => boolean;
-  getSelection: () => Selection | null;
-  getContent: () => EditorContent;
-  setContent: (content: EditorContent) => void;
-  insertBlock: (type: string, attributes?: Record<string, string>) => void;
-  insertInline: (type: string, attributes?: Record<string, string>) => void;
-  undo: () => void;
-  redo: () => void;
-  canUndo: () => boolean;
-  canRedo: () => boolean;
-  // HTML Import & Export
-  importHtml: (htmlString: string) => EditorContent;
-  exportHtml: () => string;
-  // Clear Formatting
-  clearFormatting: () => void;
-  clearTextColor: () => void;
-  clearBackgroundColor: () => void;
-  clearFontSize: () => void;
-  clearLinks: () => void;
-  // List Indent
-  indentListItem: () => void;
-  outdentListItem: () => void;
-}
-
-export interface CustomRenderer {
-  renderNode?: (node: EditorNode, children: React.ReactNode) => React.ReactElement | null;
-  renderMark?: (mark: string, attributes: Record<string, string>, children: React.ReactNode) => React.ReactElement | null;
-}
-
-export interface EditorProps {
-  initialContent?: EditorContent;
-  onChange?: (content: EditorContent) => void;
-  plugins?: Plugin[];
-  placeholder?: string;
-  className?: string;
-  toolbarClassName?: string;
-  editorClassName?: string;
-  // Link System
-  customLinkComponent?: React.ComponentType<{ href: string; children: React.ReactNode; [key: string]: any }>;
-  // Font Size System
-  fontSizes?: number[];
-  // Color System
-  colors?: string[];
-  // Headings System
-  headings?: string[];
-  customHeadingRenderer?: (level: string, children: React.ReactNode) => React.ReactElement;
-  // Custom Renderer
-  customRenderer?: CustomRenderer;
-  // Editor API Callback
-  onEditorAPIReady?: (api: EditorAPI) => void;
-  // Theme Configuration
-  theme?: {
-    borderColor?: string;
-    borderRadius?: number;
-    toolbarBg?: string;
-    buttonHoverBg?: string;
-    contentBg?: string;
-    primaryColor?: string;
-  };
-  // Image Upload
-  onImageUpload?: (file: File) => Promise<string>;
-}
-