create new folder button

pkgs/editor/src/Cabinet.tsx

@@ -1,6 +1,10 @@
+import clsx from 'clsx'
+import { Component, createSignal, JSX, Show, splitProps } from 'solid-js'
 import { createContext, For, useContext } from 'solid-js'
 import { createStore, produce } from 'solid-js/store'
 import { Button, Icon } from 'ui'
+import { KnotEditor } from '.'
+import { KnotEditorProvider } from './Editor'
 
 export type File = {
   id: number
@@ -104,12 +108,65 @@ export const CabinetProvider = (props: { children: any }) => {
             />
           )}
         </For>
+        <CreateFolderCard />
       </div>
       {props.children}
     </CabinetContext.Provider>
   )
 }
 
+function CreateFolderCard() {
+  const cabinet = useCabinetContext()
+  const [show, setShow] = createSignal(false)
+
+  return (
+    <Card
+      onclick={() => {
+        setShow(true)
+      }}
+      class='bg-black/10'
+    >
+      <Show
+        when={show()}
+        fallback={
+          <Button>
+            create
+          </Button>
+        }
+      >
+        <KnotEditorProvider
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              console.log('add')
+            }
+          }}
+        />
+      </Show>
+    </Card>
+  )
+}
+
+type CardProps = {
+  children: JSX.Element
+} & JSX.HTMLAttributes<HTMLDivElement>
+
+const Card: Component<CardProps> = (props) => {
+  const [, rest] = splitProps(props, ['children', 'class'])
+
+  return (
+    <div
+      class={clsx(
+        'border rounded bg-gray-800 text-white p-2 flex flex-col gap-2',
+        props.class,
+      )}
+      {...rest}
+    >
+      {props.children}
+    </div>
+  )
+}
+
 function FolderCard(
   props: {
     file: File
@@ -118,7 +175,7 @@ function FolderCard(
   const cabinet = useCabinetContext()
 
   return (
-    <div class='border rounded bg-gray-800 text-white p-2 flex flex-col gap-2'>
+    <Card>
       <div class='flex justify-between'>
         <div class='flex items-center justify-center gap-1'>
           <Icon name='IconFolder' />
@@ -168,6 +225,6 @@ function FolderCard(
           </div>
         </div>
       </div>
-    </div>
+    </Card>
   )
 }

pkgs/editor/src/Editor.tsx

@@ -1,16 +1,14 @@
 import type { Editor } from '@tiptap/core'
+import { JSX, splitProps } from 'solid-js'
 import clsx from 'clsx'
 import { createEditor } from 'solid-tiptap'
 import { TextArea } from 'ui'
 
 import {
+    Component,
   createContext,
-  createEffect,
-  createSignal,
-  JSX,
   onCleanup,
   onMount,
-  Show,
   useContext,
 } from 'solid-js'
 import { useDocumentManager } from './global/documentManager'
@@ -28,27 +26,27 @@ export const useKnotEditor = () => {
   return context
 }
 
-export const KnotEditorProvider = (
-  props: {
-    // id?: number
-    // lastId?: number
-    // focusedIndex?: number
-    // children?: JSX.Element
-    // content?: string
-    // editable?: boolean
-  },
+type PaperProps = {
+  children?: JSX.Element
+  content?: string
+} & JSX.HTMLAttributes<HTMLDivElement>
+
+
+export const KnotEditorProvider: Component<PaperProps> = (
+  props
 ) => {
-  let textAreaRef: HTMLDivElement
   let id: number = 0
+  let textAreaRef: HTMLDivElement
   const { addEditor, removeEditor } = useDocumentManager()
+  const [, rest] = splitProps(props, ['children', 'class'])
 
   const editor = createEditor(() => ({
     content: props.content ?? '',
     element: textAreaRef,
     extensions: extensions,
     editorProps: {
       attributes: {
-        id: 'editor' + (props.id ? props.id : 0),
+        // id: 'editor' + (props.id ? props.id : 0),
         class: clsx(
           'lg:prose-md',
           'prose-p:m-0',
@@ -94,7 +92,8 @@ export const KnotEditorProvider = (
 
   return (
     <TextArea
-      ref={textAreaRef}
+      ref={textAreaRef!}
+      {...rest}
     />
   )
 }

pkgs/editor/src/features/caret/index.tsx

@@ -1,7 +1,5 @@
-import { EditorEvents } from '@tiptap/core'
 import clsx from 'clsx'
-import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { useKnotEditor } from '../../Editor'
+import { createEffect, createSignal, onCleanup, onMount } from 'solid-js'
 import { useDocumentManager } from '../../global/documentManager'
 
 /**
@@ -52,6 +50,7 @@ export function getDefaultCaretRect() {
 
 export function Caret() {
   let blinkAnimation: Animation
+  const blinkAnimationDuation: number = 1100
   let caret: HTMLDivElement
   let typingChecker: NodeJS.Timer
 
@@ -74,6 +73,11 @@ export function Caret() {
     move()
   }
 
+  createEffect(() => {
+    console.log('editor count is changed', editors.length)
+    addEventListeners()
+  })
+
   function addEventListeners() {
     editors.forEach(e => {
       e.handler.on('selectionUpdate', moveCb)
@@ -94,27 +98,28 @@ export function Caret() {
 
   function checkTyping() {
     const diff = Date.now() - lastMoved()
-    setIsTyping(diff < 800)
+    setIsTyping(diff < 500)
   }
 
   createEffect(() => {
     if (isTyping()) {
       console.log('start typing')
-      blinkAnimation.currentTime = 1100
+      console.log('ani current time', blinkAnimation.currentTime)
+      blinkAnimation.currentTime = blinkAnimationDuation - 50
+      // requestAnimationFrame(() => blinkAnimation.pause())
       blinkAnimation.pause()
     } else if (blinkAnimation) {
       console.log('stop typing')
       if (blinkAnimation.playState === 'paused') {
+        console.log('ani start time', blinkAnimation.currentTime)
         blinkAnimation.play()
       }
-      // setTimeout(() => blinkAnimation.play(), 100)
     }
   }, false)
 
   onMount(() => {
     setDefaultCaret('transparent')
     initBlinkAnimation()
-    addEventListeners()
 
     typingChecker = setInterval(checkTyping, 100)
   })
@@ -130,13 +135,15 @@ export function Caret() {
     if (!caret) {
       return
     }
-    let { duration } = opts || { duration: 250 }
+    let { duration } = opts || { duration: 150 }
     const now = Date.now()
 
     if (isTyping() && now - lastMoved() < 100) {
       duration = 0
     }
 
+    setLastMoved(now)
+
     const { x, y, height } = getDefaultCaretRect()
       || { x: 0, y: 0, height: 0 }
     const r = caret.getBoundingClientRect()
@@ -190,21 +197,22 @@ export function Caret() {
 
     caret.animate(keyframes, options)
 
-    return setLastMoved(now)
+    return
   }
 
   function initBlinkAnimation() {
     const blinkFrames = {
-      opacity: [0, 1],
-      width: ['8px', '1px'],
-      offset: [0.5, 1],
-      // easing: ['step-start', 'ease-in'],
+      // opacity: [0.2, 1],
+      // borderRadius: ['2px', '0px'],
+      width: ['12px', '2px'],
+      offset: [0.01, 0.49, 0.5],
+      easing: ['ease-out', 'step-end'],
       // easing: 'steps(2, jump-both)',
-      easing: 'ease-out',
+      // easing: 'ease-in',
     }
 
     const blinkOptions = {
-      duration: 1200,
+      duration: blinkAnimationDuation,
       iterations: Infinity,
     }
 
@@ -228,8 +236,13 @@ export function Caret() {
 
   return (
     <div
-      ref={caret}
-      class='top-0 left-0 h-0 absolute w-1 bg-caretColor z-50 pointer-events-none'
+      ref={caret!}
+      class={clsx(
+        'top-0 left-0 h-0 absolute w-2 bg-caretColor z-50 pointer-events-none',
+        {
+          'mix-blend-difference': !isTyping(),
+        },
+      )}
     />
   )
 }

pkgs/editor/src/todo.md

@@ -39,8 +39,8 @@ bottom-control-bar
 
 Caret cursor should not be contained by editor.
 
-- [] make caret free - and one and only.
-  by create provider that contains all editors state. And use it.
+- [x] make caret free - and one and only.
+      by create provider that contains all editors state. And use it.
 - [] make add-folder-button-box.
 
 ### problem
@@ -53,3 +53,13 @@ Hope i know how to debug these kind of problem.
 Have to find bottleneck before my code goes complete chaos.
 
 ## 23.11.14(tue)
+
+- [] make add-folder-button-box.
+
+cabinet -> createFolderCard Component
+prevent enter key event go down to editor component.
+think i should change name KnotEditorProvider to just Paper
+
+Box -> File -> Paper
+
+Board or Clip -> Papers

pkgs/ui/src/TextArea.tsx

@@ -1,21 +1,24 @@
-import clsx from "clsx";
-import { Accessor, JSX, onMount } from "solid-js";
+import clsx from 'clsx'
+import { Component, JSX, splitProps } from 'solid-js'
 
-type propType = JSX.HTMLAttributes<HTMLDivElement>;
-type Component = (props: propType & { ref?: HTMLDivElement }) => JSX.Element;
+type TextAreaProps = JSX.HTMLAttributes<HTMLDivElement>
+
+const TextArea: Component<TextAreaProps> = (props) => {
+  const [, rest] = splitProps(props, ['children', 'class'])
 
-const TextArea: Component = (props) => {
   return (
     <div
-      id="text-area"
+      id='text-area'
       ref={props.ref}
       class={clsx(
-        "w-full flex flex-1 max-h-full justify-center overflow-hidden",
+        'w-full flex flex-1 max-h-full justify-center overflow-hidden',
+        props.class,
       )}
+      {...rest}
     >
       {props.children}
     </div>
-  );
-};
+  )
+}
 
-export { TextArea };
+export { TextArea }

pkgs/ui/style/index.css

@@ -25,7 +25,7 @@
     --icon-fg: theme("colors.gray.600");
     --icon-bg: theme("colors.gray.200");
 
-    --caret-color: theme("colors.gray.900");
+    --caret-color: theme("colors.stone.600");
 
     /* layout */
     --editor-padding: 4rem env(safe-area-inset-right) 10rem
@@ -44,7 +44,7 @@
     --icon-fg: theme("colors.gray.300");
     --icon-bg: theme("colors.gray.700");
 
-    --caret-color: theme("colors.gray.200");
+    --caret-color: theme("colors.stone.200");
   }
 
   /* scrollbar styling */