Giter Club home page Giter Club logo

prosemirror-tables's Introduction

prosemirror

[ WEBSITE | ISSUES | FORUM ]

ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

The ProseMirror library consists of a number of separate modules. This repository just serves as a central issue tracker, and holds a script to help easily check out all the core modules for development.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

STOP READING HERE IF YOU'RE SIMPLY USING PROSEMIRROR. YOU CAN INSTALL THE SEPARATE NPM MODULES FOR THAT. THE INSTRUCTIONS BELOW ONLY APPLY WHEN DEVELOPING PROSEMIRROR!

Setting up a dev environment

Clone this repository, and make sure you have node and yarn (due to a string of issues with NPM 5, NPM is not currently supported) installed. Next, from the cloned directory run:

bin/pm install

This will fetch the submodules, install their dependencies, and build them.

The bin/pm script in this repository provides functionality for working with the repositories:

  • bin/pm build rebuilds all the modules

  • bin/pm watch sets up a process that automatically rebuilds the modules when they change

  • bin/pm status prints the git status of all submodules

  • bin/pm commit <args> runs git commit with the given arguments in all submodules that have pending changes

  • bin/pm test runs the (non-browser) tests in all modules

  • bin/pm push runs git push in all modules

  • bin/pm grep <pattern> greps through the source code for the modules for the given pattern

  • bin/pm dev-start starts a server that rebuilds the packages whenever their sources change, and exposes the demo (demo/*) under a webserver on port 8080

(Functionality for managing releases will be added in the future.)

Community

Development of ProseMirror happens in the various repositories exposed under the ProseMirror organization on GitHub. Bugs for core packages are tracked in the bug tracker for the meta repository.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

prosemirror-tables's People

Contributors

ahixon avatar anton-cheloshkin avatar apanian25 avatar atl-nathanf avatar bradleyayers avatar cmlenz avatar davvidbaker avatar dependabot[bot] avatar dxparker avatar eshvedai avatar hedgerwang avatar ianmcateer avatar jpuri avatar jquintana-atlassian avatar kiejo avatar lpellegr avatar marduke182 avatar marijnh avatar mh4gf avatar micgro42 avatar nathf avatar ocavue avatar powerkiki avatar ratox avatar scarroll32 avatar superchu avatar torifat avatar wang1xiang avatar weijia18 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

prosemirror-tables's Issues

Drag and drop of table content is blocked

Patch ee18e58 prevents the effect of dropping content whose HTML matches "<table>". I'd be interested in what the reason for that is, but I don't think it is a good idea — dragging content with tables seems like a valid thing for a user to do.

Can't set selection to a table node

We currently store data attribs on our table node that get lost in a copy+paste scenario

Attempting to create a NodeSelection at the pos of a table gets overridden to a CellSelection

e.g.

dispatch(tr.setSelection(NodeSelection.create(tr.doc, tableNodePos)));

This node selection gets overridden as tableRole === table falls into this condition:

let map = TableMap.get(sel.node), start = sel.from + 1
let lastCell = start + map.map[map.width * map.height - 1]
normalize = CellSelection.create(doc, start + 1, lastCell)

Feels like there is two use cases here: selecting all cells in a table and selecting the table node itself

Any thoughts on this @marijnh ?

Cannot build on Windows

Hi I am trying to use your plugin inside of a product that I am developing, however I get this error on Windows 10 with Node 10.16.0.

#> yarn run watch_demo
yarn run v1.17.3
warning package.json: "dependencies" has dependency "prosemirror-example-setup" with range "^1.0.1" that collides with a dependency in "devDependencies" of the same name with version "^1.0.0"
$ rollup -w -c rollup.demo.config.js
rollup v0.49.3
bundles demo.js → demo_bundle.js...
(!) Some options have been renamed
https://gist.github.com/Rich-Harris/d472c50732dab03efeb37472b08a3f32
options.entry is now options.input
options.dest is now options.output.file
options.format is now options.output.format
[!] TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '\u0000commonjs-proxy:C:\\Users\\nicholasa\\__source_code\\prosemirror-tables\\node_modules\\orderedmap\\package.json'
TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '\u0000commonjs-proxy:C:\\Users\\nicholasa\\__source_code\\prosemirror-tables\\node_modules\\orderedmap\\package.json'
    at Object.readFile (fs.js:296:3)
    at next (C:\Users\nicholasa\__source_code\prosemirror-tables\node_modules\browser-resolve\index.js:98:12)
    at load_shims (C:\Users\nicholasa\__source_code\prosemirror-tables\node_modules\browser-resolve\index.js:116:7)
    at resolve (C:\Users\nicholasa\__source_code\prosemirror-tables\node_modules\browser-resolve\index.js:236:5)
    at C:\Users\nicholasa\__source_code\prosemirror-tables\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:58:5
    at new Promise (<anonymous>)
    at resolveId$1 (C:\Users\nicholasa\__source_code\prosemirror-tables\node_modules\rollup-plugin-node-resolve\dist\rollup-plugin-node-resolve.cjs.js:57:11)
    at promise.then.result (C:\Users\nicholasa\__source_code\prosemirror-tables\node_modules\rollup\dist\rollup.js:1750:32)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 "dependencies": {
    "prosemirror-example-setup": "^1.0.1",
    "prosemirror-keymap": "^1.0.0",
    "prosemirror-model": "^1.0.0",
    "prosemirror-state": "^1.0.0",
    "prosemirror-transform": "^1.0.0",
    "prosemirror-view": "^1.0.10"
  },
  "devDependencies": {
    "builddocs": "^0.3.0",
    "ist": "^1.0.1",
    "mocha": "^3.4.2",
    "prosemirror-commands": "^1.0.0",
    "prosemirror-example-setup": "^1.0.0",
    "prosemirror-menu": "^1.0.0",
    "prosemirror-schema-basic": "^1.0.0",
    "prosemirror-test-builder": "^1.0.0",
    "rollup": "^0.49.3",
    "rollup-plugin-buble": "^0.15.0",
    "rollup-plugin-commonjs": "^6.0.0",
    "rollup-plugin-node-resolve": "^2.0.0"
  },
$ yarn -v
1.17.3
$ npm -v
6.9.0

Thank you for your help

mergeCells creates a column when schema does not allow empty rows

When merging multiple rows together, mergeCells command leaves empty rows.

It creates problems for situations when schema does not allow empty rows, so that ProseMirror appends cells inside newly created empty rows, which then gets "fixed" by fixTables by creating another column.

Strange invisible selection deletion behaviour

[originally reported by @bradleyayers on gitlab]

When double clicking in the empty area of a cell and pressing delete, two strange things happen:

  • content in adjacent cells are merged

  • which adjacent cell is merged depends on which row the caret is in

    • in the first row, merging happens →
    • in other rows, merging happens ←

2017-04-19_double_click_delete

Changelog

Thank you so much for this repo - it has been a joy to work with.

Would you be willing to maintain a CHANGELOG.md file to track what has been updated/fixed/changed in each release? Prosemirror provides some really great Changelog documentation (prosemirror-view for example) and it'd be really useful to have that for this repo as well. I find myself scanning through commits to figure out what changed - which doesn't always give me the best confidence when updating.

build_demo is failing

Hi, I'd like to try this plugin to see if I can use prosemirror on my project.
Unfortunately when I try to run the demo I have build issues.

Do you host this demo somewhere ?

My config:
$ node -v: v9.3.0
$ npm -v: 5.5.1

After running a npm install then a npm run build_demo I have this error:

                                                                                                                                                                                                                                                                                                                                                                                       
> [email protected] build_demo /Users/user1/Projects/prosemirror-tables
> rollup -c rollup.demo.config.js

(!) Some options have been renamed
https://gist.github.com/Rich-Harris/d472c50732dab03efeb37472b08a3f32
options.entry is now options.input
options.dest is now options.output.file
options.format is now options.output.format

demo.js → demo_bundle.js...
[!] Error: Could not resolve '/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js' from commonjs-proxy:/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js
Error: Could not resolve '/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js' from commonjs-proxy:/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js
    at /Users/user1/Projects/prosemirror-tables/node_modules/rollup-plugin-node-resolve/dist/rollup-plugin-node-resolve.cjs.js:85:23
    at /Users/user1/Projects/prosemirror-tables/node_modules/browser-resolve/index.js:238:20
    at /Users/user1/Projects/prosemirror-tables/node_modules/browser-resolve/index.js:106:24
    at process._tickCallback (internal/process/next_tick.js:152:19)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build_demo: `rollup -c rollup.demo.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build_demo script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user1/.npm/_logs/2018-01-25T18_47_44_670Z-debug.log

I tried to reinstall orderedmap but it did not change anything.
The file /Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js exists and is readable

I saw that I needed to change some config in rollup.demo.config.js.
Here is the new config I used:

import buble from "rollup-plugin-buble"
import nodeResolve from "rollup-plugin-node-resolve"
import commonJS from "rollup-plugin-commonjs"

export default {
  input: "demo.js",
  output: {
    file: "demo_bundle.js",
    format: "iife"
  },
  plugins: [
    buble({
      exclude: "node_modules/**",
      namedFunctionExpressions: false
    }),

    nodeResolve({
      main: true,
      browser: true
    }),

    commonJS({
      include: '**',
      sourceMap: false
    })
  ]
}

Same common-js error:

 ~/Projects/prosemirror-tables > npm run build_demo                                                                                                                                                                                                                                                                                                                                                                                        

> [email protected] build_demo /Users/user1/Projects/prosemirror-tables
> rollup -c rollup.demo.config.js


demo.js → demo_bundle.js...
[!] Error: Could not resolve '/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js' from commonjs-proxy:/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js
Error: Could not resolve '/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js' from commonjs-proxy:/Users/user1/Projects/prosemirror-tables/node_modules/orderedmap/index.js
    at /Users/user1/Projects/prosemirror-tables/node_modules/rollup-plugin-node-resolve/dist/rollup-plugin-node-resolve.cjs.js:85:23
    at /Users/user1/Projects/prosemirror-tables/node_modules/browser-resolve/index.js:238:20
    at /Users/user1/Projects/prosemirror-tables/node_modules/browser-resolve/index.js:106:24
    at process._tickCallback (internal/process/next_tick.js:152:19)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build_demo: `rollup -c rollup.demo.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build_demo script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user1/.npm/_logs/2018-01-25T18_50_45_277Z-debug.log

undo column re-sizing with cmd+z

Browser
Chrome

Expected Behavior
When I resize a column and then press Cmd+Z, it should undo my changes.

Actual Behavior
Cmd+Z does not undo resizing of a column. It does work only if a new column is created before resizing.

Cell selection issues with merged cells

Hello,

I discovered some issues regarding cell selection with merged cells:
captured

The cell selection should always form a rectangle, which, as you can see is not.

Digging through the code, I think it has something to do with: tablemap -> findCell.
It sets the "left" and "top" of the rect, without taking into account merged cells, which should result in the expansion of the selection.

If you would like to see how the cell selection should behave, open a google sheet and replicate.

Please give it a look,
Thank you very much!!

Can I use prosemirror tables in prosemirror markdown?

Now I have a requirement in markdown like

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

parse it into a table

I try to mix them but it seems not to work.
I don't know if it can work together, can you tell me how to do?

Can't place cursor before or after table

If there is no existing content before or after a table at the time it is inserted, it is impossible to place the cursor before or after the table. A cursor line appears for a brief few milliseconds before the selection is placed inside the first or last table cell.

Dragging and holding such that the large cursor line starts flickering sometimes allows you to insert text before or after the table if you time it just right.

tables

There also appears to be an issue (also shown in the gif), where pressing Enter inside a cell sometimes inserts new rows or columns, somewhat randomly from what I can see. Let me know if I should open a new issue for that.

I'm happy to have a go at solving this one if you can provide any pointers as to where and why this might be happening.

Pasting table cells from clipboard produces malformed tables

When copy/pasting a table, the first cell (top left) is empty, and its content is inserted before the table. This regression was introduced in 26c640f.

Demo:

2018-01-23 prosemirror-tables-41

(What is perhaps the same problem) also manifests as an exception when pasting a single cell. The exception started occurring in 8fee4bb.

Demo:

2018-01-23 prosemirror-tables-41 single cell

Stack trace:

demo_bundle.js:4744 Uncaught TypeError: Cannot read property 'content' of null
    at fitRightClosed (demo_bundle.js:4744)
    at fitRightClosed (demo_bundle.js:4752)
    at fitRightJoin (demo_bundle.js:4733)
    at fitRightJoin (demo_bundle.js:4711)
    at fitRight (demo_bundle.js:4778)
    at replaceStep (demo_bundle.js:4621)
    at Transaction.Transform.replace (demo_bundle.js:4640)
    at Transaction.Transform.replaceRange (demo_bundle.js:5030)
    at TextSelection.replace (demo_bundle.js:5219)
    at TextSelection.replace (demo_bundle.js:5399)
fitRightClosed @ demo_bundle.js:4744
fitRightClosed @ demo_bundle.js:4752
fitRightJoin @ demo_bundle.js:4733
fitRightJoin @ demo_bundle.js:4711
fitRight @ demo_bundle.js:4778
replaceStep @ demo_bundle.js:4621
Transform.replace @ demo_bundle.js:4640
Transform.replaceRange @ demo_bundle.js:5030
replace @ demo_bundle.js:5219
replace @ demo_bundle.js:5399
replaceSelection @ demo_bundle.js:5746
doPaste @ demo_bundle.js:9542
editHandlers.paste @ demo_bundle.js:9549
view.dom.addEventListener.view.eventHandlers.(anonymous function) @ demo_bundle.js:9129

/cc @marijnh

Selecting cells in table causes "Class constructor Selection cannot be invoked without 'new'" error

Selecting cells in a table causes the error "Class constructor Selection cannot be invoked without 'new'". This is the output from the source inspector where the error occurs:

var CellSelection = (function (Selection) {
  function CellSelection($anchorCell, $headCell) {
    if ( $headCell === void 0 ) $headCell = $anchorCell;

    var table = $anchorCell.node(-1), map = TableMap.get(table), start = $anchorCell.start(-1);
    var rect = map.rectBetween($anchorCell.pos - start, $headCell.pos - start);
    var doc = $anchorCell.node(0);
    var cells = map.cellsInRect(rect).filter(function (p) { return p != $headCell.pos - start; });
    // Make the head cell the first range, so that it counts as the
    // primary part of the selection
    cells.unshift($headCell.pos - start);
    var ranges = cells.map(function (pos) {
      var cell = table.nodeAt(pos), from = pos + start + 1;
      return new prosemirrorState.SelectionRange(doc.resolve(from), doc.resolve(from + cell.content.size))
    });
    Selection.call(this, ranges[0].$from, ranges[0].$to, ranges);
    // :: ResolvedPos
    // A resolved position pointing _in front of_ the anchor cell (the one
    // that doesn't move when extending the selection).
    this.$anchorCell = $anchorCell;
    // :: ResolvedPos
    // A resolved position pointing in front of the head cell (the one
    // moves when extending the selection).
    this.$headCell = $headCell;
  }

Seems like it does not get a Selection instance correctly.

I have added the plugins columnResizing(), tableEditing() in this order.

Adding and resizing the table works fine.

Did I miss something?
Best regards
Vu

tables and collaboration

Hey,
for my own plugins I have added a metadata "remote" to transactions that originate from another client and then I check for this meta tag and if present I skip much of what a given cleanup plugin would do. However, with prosemirror-tables there seems to be no such check and it seems to lead to problems. Particularly this situation is problematic:

  1. User A and B are connected to the same document, prosemirror instances using the collabartion system.
  2. User A creates a 2x2 tables and makes sure there is an empty paragraph following the table.
  3. User A puts the caret in the empty paragraph following the table and hits "Backspace".

Observed behavior:

  1. The ProseMirrror instance of User A creates a step:

{"stepType":"replaceAround","from":31449,"to":31452,"gapFrom":31450,"gapTo":31452,"insert":2,"slice":{"content":[{"type":"table","content":[{"type":"table_row","content":[{"type":"table_cell","attrs":{"colspan":1,"rowspan":1}}]}]}],"openStart":1},"structure":true,"client_id":1853827437},{"stepType":"replace","from":31454,"to":31454,"slice":{"content":[{"type":"table_cell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph"}]}]},"client_id":1853827437}

  1. The ProseMirror instance User B receives the step from User A, applies it and then creates its own step which it distributes to User A:

{"to": 31454, "slice": {"content": [{"content": [{"type": "paragraph"}], "type": "table_cell", "attrs": {"colspan": 1, "rowspan": 1}}]}, "from": 31454, "client_id": 2726058589, "stepType": "replace"}

  1. Now the ProseMirror of User A responds by creating yet another step, etc. Eventually they create transforms that lead to TransformError. The end user just notices that initially the table goes from a 2 x 2 to 3 x 2, then 3 x 4, 3 x 8, 3 x 16, etc. .

Expected behavior:

Likely only the plugin in the prosemirror doing the initial change (User A) should make a change to the document. The client connected remotely should likely not add any further steps.

Cell selection and resize not working when table is inside a block

Issue details

GIF 2-26-2020 10-01-07 AM
put table inside a block,containing block schema look like this
image
Problem : cannot make cell selection(no selectedCell class in dom) and resizing,but keyboard works(eg. shift+arrow)

Steps to reproduce

ProseMirror version

+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | -- [email protected] | | -- [email protected]
| +-- [email protected]
| | -- [email protected] deduped | +-- [email protected] | | +-- [email protected] deduped | | +-- [email protected] deduped | | -- [email protected]
| +-- [email protected] deduped
| +-- [email protected] deduped
| +-- UNMET PEER DEPENDENCY [email protected]
| | +-- [email protected] deduped
| | +-- [email protected] deduped
| | +-- [email protected] deduped
| | +-- [email protected] deduped
| | -- [email protected] deduped | +-- [email protected] | | -- [email protected] deduped
| +-- [email protected]
| +-- [email protected] deduped
| +-- [email protected] deduped
| `-- [email protected] deduped

Affected platforms

  • [x ] Chrome
  • Firefox
  • Internet Explorer
  • Other

Screenshots / Screencast (Optional)

Error in domCellAround function in ie11 with view nodes containing svg

If custom nodes with svg elements are used in the prosemirror editor, prosemirror-tables will cause an error in domCellAround() because classList is not supported for svgs in ie11.

change:

function domCellAround(target) {
  while (target && target.nodeName != "TD" && target.nodeName != "TH")
    target = target.classList.contains("ProseMirror") ? null : target.parentNode
  return target
}

to:

function domCellAround(target) {
  while (target && target.classList && target.nodeName != "TD" && target.nodeName != "TH")
    target = target.classList.contains("ProseMirror") ? null : target.parentNode
  return target
}

will solve the problem.

best regards
Vu

Table horizontal scroll after resizing a column

Browser
Chrome

Expected behavior
If the table is smaller than the viewport width or the table container, then the table should scroll horizontally
table-resizing-demo

Actual behavior
last column gets broken after resizing if preceding column has fixed width.
resize_scroll

Firefox sometimes shows native cell selection borders when dragging over a table

Firefox has its own (buggy) cell selection feature, which it appears can't be turned off completely. This sometimes causes blue borders to appear on cells when selecting.

We tried using -moz-user-select to suppress this by disabling selection for cells over email, which almost works, but even if you re-enable selection for child nodes, the margin at the sides of the cells remains unselectable, and clicking there won't place a cursor.

TinyMCE and CKEditor appear to have some workaround for this, but I haven't been able to find it.

Right click would change table selection

Right click would change table selections, for example:
output

Step to reproduce:

  1. Use Shift + click to select multiple cells
  2. Right click on the first cell you selected.
  3. Observe that the selection has changed.

I had a bit of digging around, I noticed that this only happens when the target of the right click event is a different node than window.getSelection().anchorNode. So this looks like the default browser behaviour, but we should be able to detect right click keep the selection

Error building README

I run into an error working with #30 when building docs. Node version V8.3.0 with macOS 10.13:

➜  prosemirror-tables git:(add-create-table) npm run build_readme

> [email protected] build_readme /Users/ewind/code/mtdp/wiki/rich-text/prosemirror-tables
> builddocs --name tables --format markdown --main src/README.md src/*.js > README.md

sh: builddocs: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] build_readme: `builddocs --name tables --format markdown --main src/README.md src/*.js > README.md`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] build_readme script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ewind/.npm/_logs/2017-12-12T01_02_38_305Z-debug.log

I've manually workaround this, while the default config for now may be leaky. Any ideas?

The whole block is selected, when try to select only 2 cells in table.

We use ProseMirror with its tables inside tiptap editor. But unexpected things happens only inside ProseMirror div block.

When i try to select only 2 or more cells in table, "selectedCell" class sets up as expected. But the whole content become covered with selected color plate.
изображение

изображение

And the ProseMirror div get one more class "ProseMirror-hideselection". I though that this class is responsible for hiding that plate. But playing with its properties gives nothing.

Where should i go and dig to resolve this issue?

thead, tfoot?

Hey @eshvedai
I noticed you built this basically with a model in mind where there is only a single <tbody> element inside of the table. Is there a specific reason for why you avoided the <thead> and <tfoot>?

native handlebars in firefox

I am running prosemirror-tables and in Firefox I see the native resize controls. In CK Editor they turn them off:

See here https://github.com/ckeditor/ckeditor-dev/blob/fc149eeb4b92ba9ea64c6becee9e0ddff906097f/plugins/wysiwygarea/plugin.js#L554-L558

I also see you turn them off in the demo:

document.execCommand("enableObjectResizing", false, false)
document.execCommand("enableInlineTableEditing", false, false)

Any reason this cannot be made part of the general plugin?

CellSelection.colSelection and CellSelection.rowSelection have the wrong names

(Disclaimer: I gave them those wrong names. Not sure what was going on with that.)

Patch 526d0f6 already fixes the isRowSelection and isColSelection predicates, but didn't rename the corresponding selection-creation utilities.

I propose simply swapping them and bumping the minor version number (since 0.x semantic versions don't guarantee compatibility across minor versions). If that sounds good I can submit a pull request.

Proposal to set meta on transaction if column is resized

Problem

When a user changes column width, doc is considered as changed though its content is not changed. That's a proper behaviour of ProseMirror, but if I need to know that transaction changes only the width of any column, I need to compare docs with some custom differ, which ignores changing the width. Doing this on each transaction triggered in the doc is quite expensive.

Solution

Add meta to the transaction which changes column width. This would help a lot to understand if the table's structure or content is changed or it's just a column width.

Why it's an issue but not the pull request?

I've checked all the official plugins of ProseMirror and noticed that each of them never sets meta to transaction. So, before doing the pull request, I would like to ask, where this practice is good or bad and does this possible pull request have a chance to be approved. Thanks!

positionAt is buggy

Given this tableNode 3x3

const tableNode = table(
  // positions 
  //  1    6    9
  tr(c11, c11, c11),
  //  18
  tr(c11, c11, c11),
  //  35
  tr(c11, c11, c11),
);

When I try to get the position at in a invalid row like that:

row = 3 // invalid
col = 0 // valid
TableMap.get(tableNode).positionAt(row, col, tableNode)

I got an exception:

RangeError: Index 3 out of range for [...]

I think this is expected but when we do the same to an invalid column:

row = 0 // valid
col = 3 // invalid(?)
TableMap.get(tableNode).positionAt(row, col, tableNode)

We got the position 16 I don't know why but looks wrong.

isInTable(state) returns false if table_row is the top level element

I'm writing some tests using prosemirror-test-builder, and found that several tests were failing where the top level node for what I was testing was a table row:

const doc = TestDocBuilder.table_row(
    TestDocBuilder.table_cell(
        TestDocBuilder.p('Some<s> text')
    )
)
const selection = TextSelection.create(doc, doc.tag.s)
return isInTable({selection}) // returns false - expected true

Peeking into this project's source code, we have:

for (let d = $head.depth; d > 0; d--) if ($head.node(d).type.spec.tableRole == "row") return true

We also have $head.node(0) === $head.doc, but the for loop stops iterating when d === 0, so the top level node is never processed. Since the test for being in a table is whether the selection.$head is in a table row, I think it would make sense to return true in this case, since the selection is indeed inside a table row.

Export util functions

The functions from util.js are very helpful when implementing custom table commands. So far I have needed access to moveCellForward, isInTable and selectionCell, but depending on the command any of the util functions could probably be useful.
Have you thought about exposing the util functions to users of the library?

request: input view

is it possible to make each cell an input type, and then use the type feature to limit the data I put?

Strange selection issue when clicking to select all text in a cell

This issue seems related to #1 with a slightly different means of selection

Given this scenario, the space in the text selected seems important (https://kmmx3y7nl5.codesandbox.io/):
cell-deletion

Chromes (/ Safari) selection seems to cross into the next cell when clicking to select all text in a cell and upon hitting backspace deletes the whole cell instead of its contents.

Some selection normalising is already happening here:

export function normalizeSelection(state, tr) {
let sel = (tr || state).selection, doc = (tr || state).doc, normalize, role
if (sel instanceof NodeSelection && (role = sel.node.type.spec.tableRole)) {
if (role == "cell" || role == "header_cell") {
normalize = CellSelection.create(doc, sel.from)
} else if (role == "row") {
let $cell = doc.resolve(sel.from + 1)
normalize = CellSelection.rowSelection($cell, $cell)
} else {
let map = TableMap.get(sel.node), start = sel.from + 1
let lastCell = start + map.map[map.width * map.height - 1]
normalize = CellSelection.create(doc, start + 1, lastCell)
}
} else if (sel instanceof TextSelection && isCellBoundarySelection(sel)) {
normalize = TextSelection.create(doc, sel.from)
}
if (normalize)
(tr || (tr = state.tr)).setSelection(normalize)
return tr
}

@marijnh would it be best to add some more normalising for a TextSelection that crosses tableCell boundaries? Selecting contents across multiple cells should result in a cell selection so hopefully shouldn't affect that scenario.

copy list in table is error

  1. clone the code https://github.com/geeknull/prosemirror-tables
  2. run the demo

feb-06-2018 15-06-16
you can see the error in above gif.

what i do?
My commit https://github.com/geeknull/prosemirror-tables/commit/358ffe19d244735cb324c7c39e94fe22c9db8a46

  1. update prosemirror-view to 1.0.10
  2. make some list in table and copy these to other cell

I guess the commit https://github.com/ProseMirror/prosemirror-view/commit/18ad6ad715956a92f56e49fc7976595776ab7c6c bring this mistake.

Making TableView public

Would it be possible to export the TableView class from the module? It would be very nice to be able to extend that reuse the logic. Our use case, or at least one of them, is that we need to add attributes to the table element and that's currently not possible since the current TableView doesn't do that.

I could create the PR if you say that's OK.

splitCell command broken when cellContent is inline

Thank you for providing this library. Integrating it was refreshingly straight forward.

While smoothing the edges of my integration of this library, I noticed that the splitCell is somewhat broken if cellContent is set to something like 'inline*'.
Some digging revealed that the root cause is in cellWrapping():

export function cellWrapping($pos) {
for (let d = $pos.depth - 1; d > 0; d--) {
const role = $pos.node(d).type.spec.tableRole;
if (role === "cell" || role === 'header_cell') return $pos.node(d)
}
return null
}

It starts it's loop at let d = $pos.depth - 1; which is fine if the current element is always a block-element within a table cell, but if the table cell actually contains only a text node then pos.depth - 1; points to the table row and thus cellWrapping returns null. Removing the - 1 fixes this issue without negatively impacting other use cases.

However, it turned out that our document model actually requires that we use block-level elements in table cells, so we are not affected/blocked by this bug.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.