Update package references and enhance README (#4)

* fix: update package references to use '@Labbs' namespace

* feat: enhance README with table commands and updated installation instructions

* fix: update package filters in deploy workflow to use '@Labbs' namespace

* feat: add GitHub Actions workflow for publishing to GitHub Packages

* feat: update package names and imports to use '@Labbs' namespace; add table support in sample document

* refactor: rename package and update imports to @Labbs scope

- Updated package name from @openblock/react to @labbs/openblock-react.
- Changed dependencies and imports to use @labbs/openblock-core.
- Added new components: TableHandles and TableMenu for enhanced table editing.
- Updated README and package.json for new package details and installation instructions.
- Refactored existing components to align with new package structure.

Author: moutonjeremy

.github/workflows/deploy.yml

@@ -25,8 +25,8 @@ jobs:
           node-version: '20'
           cache: 'pnpm'
       - run: pnpm install
-      - run: pnpm --filter @openblock/core build && pnpm --filter @openblock/react build
-      - run: pnpm --filter @openblock/example-basic build
+      - run: pnpm --filter @labbs/openblock-core build && pnpm --filter @labbs/openblock-react build
+      - run: pnpm --filter @labbs/openblock-example-basic build
       - uses: actions/configure-pages@v4
       - uses: actions/upload-pages-artifact@v3
         with:

.github/workflows/publish.yml

@@ -0,0 +1,42 @@
+name: Publish to GitHub Packages
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'pnpm'
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@labbs'
+
+      - run: pnpm install
+
+      - name: Build packages
+        run: |
+          pnpm --filter @labbs/openblock-core build
+          pnpm --filter @labbs/openblock-react build
+
+      - name: Publish @labbs/openblock-core
+        run: pnpm --filter @labbs/openblock-core publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Publish @labbs/openblock-react
+        run: pnpm --filter @labbs/openblock-react publish --access public --no-git-checks
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -37,22 +37,30 @@ editor.pm.setNodeAttrs(pos, attrs)
 - **Block-based JSON** — Notion-like format, easy to store and transform
 - **Framework-agnostic** — Vanilla JS core with React bindings (Vue, Svelte coming)
 - **TypeScript first** — Full type safety throughout
-- **Rich block types** — Headings, lists, code blocks, columns, and more
-- **Built-in UI** — Slash menu, bubble menu, drag & drop
+- **Rich block types** — Headings, lists, code blocks, tables, columns, and more
+- **Built-in UI** — Slash menu, bubble menu, drag & drop, table handles
 
 ## Quick Start
 
 ### Installation
 
+First, configure npm to use GitHub Packages for the `@labbs` scope. Create or edit `.npmrc` in your project:
+
+```
+@labbs:registry=https://npm.pkg.github.com
+```
+
+Then install the packages:
+
 ```bash
-npm install @openblock/core @openblock/react
+npm install @labbs/openblock-core @labbs/openblock-react
 ```
 
 ### React
 
 ```tsx
-import { useOpenBlock, OpenBlockView, SlashMenu, BubbleMenu } from '@openblock/react';
-import '@openblock/core/styles/editor.css';
+import { useOpenBlock, OpenBlockView, SlashMenu, BubbleMenu, TableHandles } from '@labbs/openblock-react';
+import '@labbs/openblock-core/styles/editor.css';
 
 function Editor() {
   const editor = useOpenBlock({
@@ -71,6 +79,7 @@ function Editor() {
       <OpenBlockView editor={editor} />
       <SlashMenu editor={editor} />
       <BubbleMenu editor={editor} />
+      <TableHandles editor={editor} />
     </>
   );
 }
@@ -79,8 +88,8 @@ function Editor() {
 ### Vanilla JS
 
 ```typescript
-import { OpenBlockEditor } from '@openblock/core';
-import '@openblock/core/styles/editor.css';
+import { OpenBlockEditor } from '@labbs/openblock-core';
+import '@labbs/openblock-core/styles/editor.css';
 
 const editor = new OpenBlockEditor({
   initialContent: [/* blocks */],
@@ -122,6 +131,39 @@ editor.setBlockType('codeBlock', { language: 'typescript' })
 editor.setBlockType('bulletList')
 editor.setBlockType('orderedList')
 editor.setBlockType('blockquote')
+editor.setBlockType('table')
+```
+
+### Table Commands
+
+```typescript
+import {
+  addRowAfter,
+  addRowBefore,
+  deleteRow,
+  addColumnAfter,
+  addColumnBefore,
+  deleteColumn,
+  goToNextCell,
+  goToPreviousCell,
+  isInTable
+} from '@labbs/openblock-core';
+
+// Check if cursor is in a table
+if (isInTable(editor.pm.state)) {
+  // Add row after current row
+  addRowAfter(editor.pm.state, editor.pm.view.dispatch);
+
+  // Add column before current column
+  addColumnBefore(editor.pm.state, editor.pm.view.dispatch);
+
+  // Delete current row
+  deleteRow(editor.pm.state, editor.pm.view.dispatch);
+}
+
+// Navigate between cells (Tab / Shift+Tab)
+goToNextCell(editor.pm.state, editor.pm.view.dispatch);
+goToPreviousCell(editor.pm.state, editor.pm.view.dispatch);
 ```
 
 ### ProseMirror Access
@@ -158,16 +200,67 @@ const blocks = [
     type: 'paragraph',
     props: {},
     content: [{ type: 'text', text: 'Hello world', styles: {} }]
+  },
+  {
+    id: 'table-1',
+    type: 'table',
+    props: {},
+    children: [
+      {
+        id: 'row-1',
+        type: 'tableRow',
+        props: {},
+        children: [
+          { id: 'header-1', type: 'tableHeader', props: {}, content: [{ type: 'text', text: 'Name', styles: {} }] },
+          { id: 'header-2', type: 'tableHeader', props: {}, content: [{ type: 'text', text: 'Value', styles: {} }] }
+        ]
+      },
+      {
+        id: 'row-2',
+        type: 'tableRow',
+        props: {},
+        children: [
+          { id: 'cell-1', type: 'tableCell', props: {}, content: [{ type: 'text', text: 'Item', styles: {} }] },
+          { id: 'cell-2', type: 'tableCell', props: {}, content: [{ type: 'text', text: '100', styles: {} }] }
+        ]
+      }
+    ]
   }
 ];
 ```
 
+## React Components
+
+### OpenBlockView
+The main editor component that renders the ProseMirror view.
+
+### SlashMenu
+Displays a command palette when typing `/` to insert blocks.
+
+### BubbleMenu
+Floating toolbar that appears when selecting text for formatting.
+
+### TableHandles
+Renders handles on tables for adding/removing rows and columns.
+
+```tsx
+import { TableHandles } from '@labbs/openblock-react';
+
+// Add to your editor
+<TableHandles editor={editor} />
+```
+
+When hovering over a table:
+- **Row handles** appear on the left — click to insert/delete rows
+- **Column handles** appear on top — click to insert/delete columns
+- **Extend buttons** appear on the right and bottom — click to add rows/columns
+
 ## Packages
 
 | Package | Description |
 |---------|-------------|
-| [@openblock/core](packages/core) | Framework-agnostic editor core |
-| [@openblock/react](packages/react) | React bindings and components |
+| [@labbs/openblock-core](packages/core) | Framework-agnostic editor core |
+| [@labbs/openblock-react](packages/react) | React bindings and components |
 
 ## Development
 

examples/basic/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@openblock/example-basic",
+  "name": "@labbs/openblock-example-basic",
   "version": "0.0.1",
   "private": true,
   "type": "module",
@@ -9,8 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@openblock/core": "workspace:*",
-    "@openblock/react": "workspace:*",
+    "@labbs/openblock-core": "workspace:*",
+    "@labbs/openblock-react": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/basic/src/App.tsx

@@ -1,6 +1,6 @@
-import { useOpenBlock, OpenBlockView, useEditorContent, SlashMenu, BubbleMenu } from '@openblock/react';
+import { useOpenBlock, OpenBlockView, useEditorContent, SlashMenu, BubbleMenu, TableHandles } from '@labbs/openblock-react';
 import { sampleDocument } from './data';
-import '@openblock/core/styles/editor.css';
+import '@labbs/openblock-core/styles/editor.css';
 import './styles.css';
 
 export default function App() {
@@ -48,6 +48,7 @@ export default function App() {
             <OpenBlockView editor={editor} />
             <SlashMenu editor={editor} />
             <BubbleMenu editor={editor} />
+            <TableHandles editor={editor} />
           </div>
         </div>
 

examples/basic/src/data.ts

@@ -1,4 +1,4 @@
-import type { Block } from '@openblock/core';
+import type { Block } from '@labbs/openblock-core';
 
 /**
  * Sample document with all formatting options for testing.
@@ -250,6 +250,130 @@ export const sampleDocument: Block[] = [
     type: 'divider',
     props: {},
   },
+  {
+    id: 'heading-tables',
+    type: 'heading',
+    props: { level: 2 },
+    content: [{ type: 'text', text: 'Tables', styles: {} }],
+  },
+  {
+    id: 'para-tables-intro',
+    type: 'paragraph',
+    props: {},
+    content: [{ type: 'text', text: 'Tables support headers, multiple columns, and formatted content:', styles: {} }],
+  },
+  {
+    id: 'table-1',
+    type: 'table',
+    props: {},
+    children: [
+      {
+        id: 'table-row-header',
+        type: 'tableRow',
+        props: {},
+        children: [
+          {
+            id: 'header-cell-1',
+            type: 'tableHeader',
+            props: {},
+            content: [{ type: 'text', text: 'Feature', styles: { bold: true } }],
+          },
+          {
+            id: 'header-cell-2',
+            type: 'tableHeader',
+            props: {},
+            content: [{ type: 'text', text: 'Status', styles: { bold: true } }],
+          },
+          {
+            id: 'header-cell-3',
+            type: 'tableHeader',
+            props: {},
+            content: [{ type: 'text', text: 'Description', styles: { bold: true } }],
+          },
+        ],
+      },
+      {
+        id: 'table-row-1',
+        type: 'tableRow',
+        props: {},
+        children: [
+          {
+            id: 'cell-1-1',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Rich Text', styles: {} }],
+          },
+          {
+            id: 'cell-1-2',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Complete', styles: { bold: true } }],
+          },
+          {
+            id: 'cell-1-3',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Bold, italic, underline, code', styles: {} }],
+          },
+        ],
+      },
+      {
+        id: 'table-row-2',
+        type: 'tableRow',
+        props: {},
+        children: [
+          {
+            id: 'cell-2-1',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Columns', styles: {} }],
+          },
+          {
+            id: 'cell-2-2',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Complete', styles: { bold: true } }],
+          },
+          {
+            id: 'cell-2-3',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Resizable multi-column layouts', styles: {} }],
+          },
+        ],
+      },
+      {
+        id: 'table-row-3',
+        type: 'tableRow',
+        props: {},
+        children: [
+          {
+            id: 'cell-3-1',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Tables', styles: {} }],
+          },
+          {
+            id: 'cell-3-2',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'New', styles: { italic: true } }],
+          },
+          {
+            id: 'cell-3-3',
+            type: 'tableCell',
+            props: {},
+            content: [{ type: 'text', text: 'Header rows and data cells', styles: {} }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'divider-4',
+    type: 'divider',
+    props: {},
+  },
   {
     id: 'heading-api',
     type: 'heading',