feat: can format tag name

penx-labs · May 1, 2024 · ae65131 · ae65131
1 parent 60b87a0
commit ae65131
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/extensions/database/src/ui/tag/TagSelectorContent.tsx b/extensions/database/src/ui/tag/TagSelectorContent.tsx
@@ -10,7 +10,7 @@ import {
 } from '@penx/constants'
 import { PenxEditor, useEditorStatic } from '@penx/editor-common'
 import { findNodePath, getNodeByPath } from '@penx/editor-queries'
-import { db, getRandomColor } from '@penx/local-db'
+import { db, formatTagName, getRandomColor } from '@penx/local-db'
 import { INode } from '@penx/model-types'
 import { useNodes } from '@penx/node-hooks'
 import { getEmptyParagraph } from '@penx/paragraph'
@@ -68,7 +68,8 @@ export const TagSelectorContent = ({ close, element }: Props) => {
   editor.isInTodoPage
 
   const text = getSearchText(editor, element)
-  const tagName = text.replace(/^#/, '')
+  // const tagName = text.replace(/^#/, '')
+  const tagName = formatTagName(text.replace(/^#/, ''))
 
   const filteredTypes = useMemo(() => {
     const q = text.replace(/^#/, '').toLowerCase()

diff --git a/packages/database-ui/src/TagMenu/TagMenu.tsx b/packages/database-ui/src/TagMenu/TagMenu.tsx
@@ -13,7 +13,7 @@ import {
   usePopoverContext,
 } from 'uikit'
 import { ModalNames } from '@penx/constants'
-import { db, getColorNames } from '@penx/local-db'
+import { db, formatTagName, getColorNames } from '@penx/local-db'
 import { Node } from '@penx/model'
 import { IDatabaseNode } from '@penx/model-types'
 import { useCopyToClipboard } from '@penx/shared'
@@ -73,11 +73,11 @@ function Content() {
             size="sm"
             value={name}
             onBlur={() => {
-              updateDatabaseProps({ name })
+              updateDatabaseProps({ name: formatTagName(name) })
             }}
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
-                updateDatabaseProps({ name })
+                updateDatabaseProps({ name: formatTagName(name) })
                 close()
               }
             }}

diff --git a/packages/local-db/src/domains/database.domain.ts b/packages/local-db/src/domains/database.domain.ts
@@ -19,6 +19,7 @@ import {
   ViewType,
 } from '@penx/model-types'
 import { uniqueId } from '@penx/unique-id'
+import { formatTagName } from '../libs/formatTagName'
 import { getRandomColor } from '../libs/getRandomColor'
 import { PenxDB, penxDB } from '../penx-db'
 import {
@@ -846,14 +847,15 @@ export class DatabaseDomain {
   }
 
   createTagRow = async (spaceId: string, name: string, ref = '') => {
+    const tagName = formatTagName(name)
     const databases = await this.penx.node
       .where({
         type: NodeType.DATABASE,
         spaceId,
       })
       .toArray()
 
-    const database = databases.find((db) => db.props.name === name)
+    const database = databases.find((db) => db.props.name === tagName)
     if (!database) return
 
     // Get all database cells

diff --git a/packages/local-db/src/index.ts b/packages/local-db/src/index.ts
@@ -5,3 +5,4 @@ export * from './libs/getCommonNode'
 export * from './emitter'
 export * from './libs/getRandomColor'
 export * from './libs/array-sorter'
+export * from './libs/formatTagName'
diff --git a/packages/local-db/src/libs/formatTagName.ts b/packages/local-db/src/libs/formatTagName.ts
@@ -0,0 +1,3 @@
+export function formatTagName(name = '') {
+  return name.trim().replace(/\s+/g, '-').toLowerCase()
+}