Commit Graph

269 Commits

Author SHA1 Message Date
hykocx bbd12e7596 style(BlockEditor): adjust container padding values 2026-04-26 12:01:13 -04:00
hykocx d57d3a1ca1 feat(BlockEditor): add minHeight prop to control minimum container height
- accept `minHeight` as number (converted to px) or css string value
- apply inline style on container when prop is defined
- document new prop in README
2026-04-26 11:55:51 -04:00
hykocx c9d41a8abe docs(styles): add tailwind source scanning for zen modules
- add `@source` directive in zen.css to auto-scan `@zen/module-*/dist/**/*.js`
- document tailwind class auto-discovery mechanism for modules in MODULES.md
2026-04-26 11:53:18 -04:00
hykocx 3fea89dbd4 feat(ui): add size and variant props to Input component
- add `size` prop (sm | md | lg) with corresponding tailwind size classes
- add `variant` prop supporting `default` and `ghost` styles
- add focus state tracking to enable ghost→default transition on focus
- forward `onFocus` and `onBlur` callbacks with internal focus handling
- isolate color input styling from size/variant logic
2026-04-26 11:37:42 -04:00
hykocx d170058509 refactor(icons): add categoryIcon support for representative category icons
- add optional `categoryIcon` flag to icon metadata helper in add-remove.js and business.js
- mark Add01Icon and ChartLineData01Icon as category representative icons
- use categoryIcon flag in IconsPage to display the most representative icon per category
- add `cursor-pointer` to category sidebar buttons and widen sidebar from 200px to 250px
2026-04-26 11:04:19 -04:00
hykocx 8d8c773c00 refactor(icons): remove export from internal helper function m 2026-04-26 10:53:13 -04:00
hykocx 8254e05202 chore(ui): add business icons export to shared icons index 2026-04-26 10:51:27 -04:00
hykocx 4afe334c6b feat(icons): add business icon set and improve devkit icon copy behavior
- add `src/shared/icons/business.js` with new business-related icons
- move `Wallet03Icon` from `index.js` to `business.js`
- update `index.js` to export icons from business module
- add shift+click to copy JSX snippet in icons devkit page
- update icon button tooltip to hint shift shortcut
- document apostrophe escaping rule in icons README
2026-04-26 10:50:52 -04:00
hykocx 0b73ff1d04 docs(icons): add duplicate detection guide and remove duplicate icon definitions
- add duplicate detection section in README.md with bash commands to identify duplicates
- remove `Cancel01Icon` duplicate definition from `index.js`
- remove `Delete02Icon` duplicate definition from `index.js`
2026-04-26 09:57:09 -04:00
hykocx 85d94fe135 refactor(icons): update add-remove icon components svg attributes and paths 2026-04-26 09:53:17 -04:00
hykocx 8d51e9ba03 style(admin): improve icon card layout with square aspect ratio and balanced spacing 2026-04-26 09:42:24 -04:00
hykocx d30c6b49fd style(admin): improve icon card layout and label display in icons devkit page 2026-04-26 09:40:58 -04:00
hykocx 668890fa7f refactor(admin): improve icons page sidebar layout and category display
- store first icon reference alongside count in category map
- add hasSidebar flag to conditionally adjust layout classes
- make sidebar full-width on mobile with horizontal scrolling category list
- reduce icon size and spacing to accommodate sidebar presence
- adjust grid columns breakpoints when sidebar is visible
2026-04-26 09:38:03 -04:00
hykocx 7412de96ea feat(admin): add category filter and keyword search to icons devkit page
- add category sidebar with icon counts derived from Icon.category metadata
- extend search to match icon keywords via Icon.keywords array
- add AddRemoveIcon to shared icons with category and keywords metadata
- add icons README documenting category and keywords conventions
2026-04-26 09:31:10 -04:00
hykocx a1069c3e3d feat(BlockEditor): add notion native json paste support
- import `notionJsonToBlocks` in `Block.client.js` and prioritize `text/_notion-blocks-v3-production` mime over `text/html` on paste
- implement `notionJsonToBlocks` and `notionValueToBlock` in `clipboard.js` to convert notion block json to editor blocks, preserving native types (`to_do`, `sub_sub_header`, etc.)
- update README to document the notion mime priority in paste handling
2026-04-25 21:03:13 -04:00
hykocx 0fa20ace1e fix(clipboard): add support for notion and github-flavored markdown checklist formats
- detect `to-do-list` (Notion) and `task-list` (GitHub MD) classes as checklist containers
- handle notion `<div class="checkbox-on/off">` as checkbox indicator in list items
- update README to document newly recognized HTML tags for checklist input
2026-04-25 21:00:55 -04:00
hykocx 303042e749 fix(ui): adjust submenu placement based on available viewport space
- add refs for submenu trigger and panel elements
- compute available space above/below using getBoundingClientRect
- dynamically set submenu side to avoid overflow outside viewport
2026-04-25 20:57:18 -04:00
hykocx a1f71860fe feat(ui): add repeat icon and improve block actions menu transform option
- add RepeatIcon component to shared icons index
- import and display RepeatIcon in the transform menu item of BlockActionsMenu
- remove maxHeight constraint and overflow-y-auto from actions menu panel
2026-04-25 20:55:45 -04:00
hykocx c32ab0909c feat(ui): add smart dropdown placement to block editor menus
- introduce `useDropdownPlacement` hook to compute above/below positioning based on available viewport space
- apply dynamic `maxHeight` and position class to `BlockInsertMenu` and `BlockActionsMenu` panels
- attach `triggerRef` to menu trigger buttons for accurate anchor rect calculation
- use `useLayoutEffect` to avoid layout flicker on open
2026-04-25 20:51:52 -04:00
hykocx 63ba04d583 fix(ui): anchor slash menu to bottom edge when flipped above cursor
- initialize position state with a `bottom` field set to null
- use `bottom` css property instead of `top` when menu flips above the anchor to prevent floating when content shrinks on query filtering
- remove `items.length` from layout effect dependencies since repositioning on item count change caused the flipping issue
- build `positionStyle` object conditionally based on whether `bottom` is set
2026-04-25 20:49:38 -04:00
hykocx e928e5317c refactor(BlockEditor): add BlockInsertMenu component and unify block type icon styling
- introduce `BlockInsertMenu` dropdown to insert a new block after the current one
- extract `TYPE_ICON_BOX_CLASS` constant shared between insert menu and transform menu
- align `BlockActionsMenu` transform list item padding/gap to match new insert menu style
- update README to document the new insert menu behaviour and enabled blocks filtering
2026-04-25 20:46:45 -04:00
hykocx 9d8133c7f5 refactor(ui): replace headless ui menu with custom dropdown in BlockActionsMenu
- remove Headless UI Menu and Fragment imports, unused TextIcon import
- implement manual BlockActionsMenu component to avoid pointerdown-triggered open interfering with drag start
- open dropdown only on click after checking justDragged flag
- handle outside click and Escape key for closing
- migrate submenu hover logic from BlockMenuTransformItem into new component
2026-04-25 20:42:12 -04:00
hykocx bde634d169 feat(ui): add block transform submenu with hover panel and drag fix
- add `BlockMenuTransformItem` component with hover-triggered submenu panel
- import `ArrowRight01Icon` and `TextIcon` icons for transform UI
- track drag state via `justDraggedRef` to prevent menu opening after drag
- expose `close` from `<Menu>` render prop to allow manual close on transform select
- wire transform options from block registry into the new submenu item
2026-04-25 20:35:51 -04:00
hykocx 53ace7fc1f refactor(BlockEditor): replace drag handle button with headless ui menu
- add context menu on drag handle with transform, duplicate and delete actions
- introduce `MenuOpenSync` helper to keep handle visible while menu is open
- pass `onTransformBlock`, `onDuplicateBlock`, `onDeleteBlock` and `enabledBlocks` props to Block
- compute `transformOptions` via `useMemo` filtering allowed text block types
- update BlockEditor to wire new block action handlers down to each Block
- update README to document new block action props and menu behavior
2026-04-25 20:29:18 -04:00
hykocx 085a779c74 feat(BlockEditor): add rich paste support with html-to-blocks parsing
- add clipboard.js with htmlToBlocks, blocksToHtml, and blocksToPlainText helpers
- handle single-paragraph html paste as inline splice preserving block type
- handle multi-block html paste by splitting current block and merging head/tail paragraphs
- add onPasteInline and onPasteBlocks props to Block component
- implement handlePasteInline and handlePasteBlocks in BlockEditor
- fallback to plain text insertion when html is absent or yields no blocks
- update README to document clipboard behaviour and new paste handlers
2026-04-25 20:19:32 -04:00
hykocx 0c10dd0142 docs(devkit): add dot badge variants preview to components page 2026-04-25 20:07:48 -04:00
hykocx c87f74a18e fix(BlockEditor): close slash menu when clicking outside or on different block
- add `handleFocus` in Block to reopen slash menu on focus if content starts with `/`
- add `outerRef` on editor root div to detect outside clicks
- add `useEffect` with document `mousedown` listener to close slash menu when clicking outside the editor or on a different block
- add `data-slash-menu` attribute on SlashMenu to exclude it from the close trigger
2026-04-25 20:05:32 -04:00
hykocx 3d9431389b fix(BlockEditor): handle br tags as single character in caret offset calculation
- replace `getCaretOffset` with `countCharsUpTo` to treat `<br>` as 1 char
- rewrite `locateOffset` to walk dom tree and account for `<br>` nodes
- add `textLength` helper to compute model-consistent node length
- update `getCaretOffset` and `getCaretRange` to use new counting logic
2026-04-25 19:36:30 -04:00
hykocx e26314b38d fix(BlockEditor): handle newline characters in inline nodes by inserting br elements 2026-04-25 19:31:13 -04:00
hykocx f88fd15b71 style(ui): set explicit dimensions on TextClearIcon in inline toolbar 2026-04-25 19:24:58 -04:00
hykocx 30cd0bbd81 feat(BlockEditor): add clear formatting button to inline toolbar
- add `removeAllMarks` function to inline/types.js
- implement `applyRemoveAllMarks` handler in BlockEditor client
- add `TextClearIcon` button with separator in Toolbar component
- expose `onClearMarks` prop on InlineToolbar
- update README to document new clear formatting action
2026-04-25 19:23:45 -04:00
hykocx 741bf39a39 feat(ui): replace code button text label with CodeSimpleIcon
- add CodeSimpleIcon svg to shared icons index
- update inline toolbar code button to use CodeSimpleIcon instead of text label
2026-04-25 19:19:24 -04:00
hykocx b4bebfd1bd fix(BlockEditor): preserve selected index only when block id and query match 2026-04-25 19:16:09 -04:00
hykocx d859874122 fix(BlockEditor): trigger select-all blocks when block content is empty on Ctrl+A 2026-04-25 19:12:04 -04:00
hykocx c7b96f2e16 fix(ui): improve block editor placeholder visibility with fade transition
- remove unused `placeholder` prop from BlockEditor component
- add `block-editor--sole-empty` class when editor has a single empty block
- show placeholder via opacity transition instead of content injection
- always render `attr(data-placeholder)` content, toggle visibility with opacity
- add 150ms ease transition for smooth placeholder fade in/out
- show placeholder when block is focused, hovered, or editor is sole-empty
2026-04-25 19:09:41 -04:00
hykocx 0000f22066 feat(BlockEditor): add single block selection via drag handle click
- add `onSelectBlock` prop to Block component wired to drag handle click
- implement `selectBlock` function in BlockEditor to select a single block and clear text selection
2026-04-25 18:55:51 -04:00
hykocx 219fb36da1 refactor(BlockEditor): replace emoji icons with react icon components and add free color picker support
- update blockRegistry to accept ReactNode icons instead of emoji strings
- replace emoji icons in all built-in block types with icon components from shared icons
- add `isHexColor` and `collectUsedColors` helpers to inline/types.js
- extend `color` and `highlight` marks to accept hex color strings in addition to palette keys
- pass `usedColors` (collected from document) to InlineToolbar
- update InlineToolbar color popover to show used colors and a free color input
- add new icons to shared icons index
- update README to reflect icon, color, and toolbar popover changes
2026-04-25 18:52:59 -04:00
hykocx 9893ade233 fix(ui): move onMouseDown prevention to individual toolbar buttons and default linkNewTab to false
- move `e.preventDefault()` from toolbar container to each individual button to avoid broad focus prevention
- default `linkNewTab` state to `false` instead of `true` for new links
- add `onMouseDown` prevention to color grid buttons
2026-04-25 18:35:11 -04:00
hykocx fdb36c39e5 feat(ui): add "open in new tab" option to block editor link toolbar
- add `linkNewTab` state (default true) in InlineToolbar
- pass `newTab` flag through `onToggleMark` on link submit and remove
- restore `newTab` value when reopening the link popover
- add checkbox ui in link popover to toggle new tab behavior
- update link serialization to render `target="_blank" rel="noopener noreferrer"` when `newTab` is set
- add `newTab` field to link mark type definition
2026-04-25 18:32:21 -04:00
hykocx 7b6bf67f36 fix(ui): keep inline toolbar visible when popover is open
- add `toolbarPinnedRef` in BlockEditor to prevent toolbar from closing while a popover is focused
- pass `onPinChange` callback to InlineToolbar to toggle the pinned state
- notify parent via `onPinChange` whenever popover state changes
- remove rect-change effect that was incorrectly closing popovers on selection update
2026-04-25 18:30:02 -04:00
hykocx 5a8d2ad02f feat(BlockEditor): add inline formatting with rich content model
- migrate block content from plain strings to InlineNode[] structure
- add inline toolbar (bold, italic, code, color, link) on text selection
- add checklist block type with toggle support
- add image block type (URL-based, phase 2)
- add inline serialization helpers (inlineToDom, domToInline)
- add inline types and length utilities
- extend caret utils with range get/set support
- update block registry and all existing block types for new content model
- update demo blocks in ComponentsPage to use rich inline content
- update README to reflect new architecture
2026-04-25 18:27:20 -04:00
hykocx 4bc7319056 refactor(ui): replace PlusSignIcon with Add01Icon in BlockEditor
- swap PlusSignIcon for Add01Icon in Block.client.js add button
- remove PlusSignIcon export from shared icons index
- update README to reflect renamed icon
2026-04-25 18:07:59 -04:00
hykocx 1fcd57807f refactor(BlockEditor): replace text symbols with icon components in block controls
- replace `+` and `⋮⋮` text with `PlusSignIcon` and `DragDropVerticalIcon` components
- add `Add01Icon` export to shared icons index
- update README to reference icon names and link to icons source
2026-04-25 18:07:18 -04:00
hykocx 980f9cc5a0 refactor(ui): implement mouse-driven multi-block selection with text and marquee modes
- add `sameSet` helper to compare two Sets for equality
- add `dragRef` to track drag state (mode, startBlockId, origin coords)
- replace `selectionchange`-based detection with `mousemove`/`mouseup` listeners
- support `text` mode: stay native until cursor leaves origin block, then switch to `block` mode
- support `block` mode: extend selection across blocks as cursor moves between them
- support `marquee` mode: rect-based selection when mousedown starts outside a contentEditable
- use `sameSet` to avoid redundant `setSelectedBlockIds` calls on unchanged selections
2026-04-25 18:05:34 -04:00
hykocx 0d7b654a2d feat(BlockEditor): add multi-block selection with ctrl+a and delete support
- add `isSelected` prop and overlay highlight to Block component
- implement double ctrl+a: first selects block content, second selects all blocks
- add `onSelectAllBlocks` callback prop to Block
- add `selectedBlockIds` state and `selectAllBlocks`/`deleteSelectedBlocks` helpers in BlockEditor
- detect cross-block native selection via `selectionchange` and convert to block selection
- handle backspace/delete key to remove all selected blocks
- clear block selection on click outside or focus change
- update README to document multi-block selection behaviour
- export new icons used by the feature
2026-04-25 18:01:18 -04:00
hykocx 14c2c3d6bf fix(BlockEditor): prevent block merge when backspace pressed with active selection
- skip merge-with-previous-block trigger if selection is not collapsed
- update README to document the collapsed-selection guard on Backspace
2026-04-25 17:56:29 -04:00
hykocx 9df91bf412 fix(BlockEditor): constrain select-all to current block and resize slash menu
- intercept Ctrl/Cmd+A to select only the current block's content, preventing cross-block merge bug
- increase slash menu width from 280 to 375 and max-height from 320 to 360
- enlarge icon container, increase gap and padding, and upsize text in slash menu items
2026-04-25 17:53:16 -04:00
hykocx 9d155a28c9 refactor(ui): improve slash menu layout and add shortcut hints
- increase menu width and max height constants
- add SHORTCUT_HINT map displaying markdown shortcuts per block type
- update empty state and list container to use rounded-lg and shadow-md
- add section label header above block items
- show monospace shortcut hint on each menu item
- tighten item padding and icon size for denser layout
2026-04-25 17:49:09 -04:00
hykocx c74737e5d9 fix(ui): improve slash menu keyboard handling and adaptive positioning
- move slash menu keyboard listener to document capture phase to prevent contentEditable default behaviors
- use circular navigation for arrow keys in slash menu
- separate undo/redo shortcuts into dedicated global keydown handler
- add adaptive positioning for slash menu with flip-up, horizontal clamp, and max-height constraints
2026-04-25 17:46:04 -04:00
hykocx 7fa2353296 style(BlockEditor): improve block spacing and placeholder visibility behavior
- increase block vertical padding from py-0.5 to py-1.5 for better readability
- increase editor container vertical padding from py-3 to py-6
- show placeholder text only on hover or focus instead of always visible
2026-04-25 17:42:51 -04:00