nib-edit / nib Goto Github PK

Having default classes and allowing us to config the class names will be great as it provides more customization towards styling.

Details of the features to be added here.

Stick the menu bar on top when scroll.

Steps:

1. create only an ordered list in editor
2. select-a
3. change list type to un-ordered

It does not works.

Trying to return the object {src: downloadURL} but nothing is stopping the loading

I'm a user of draft js and i can be able to convert html to draft.js content. So if HTML conversion supported i can ex-change my code with Nib. Nib seems is much cleaner and elegant. :)

http://www.nibedit.com/index.html
Demos font select closes immediately after mouse up, so selecting a font a is not possible.

If some text is selected and then mouse is clicked next to the selected text, it won't work. We need to click somewhere on other line to unselect the text.

MacOS 10.14.6
Firefox: 71.0

I want to contribute and am having difficulties setting up the environment.

The toolbar should appear next to selected text.

code generated by converter:
<ahref="https://www.favie.tech">hello</a>

I wrote a visitor that replaces these nodes:

{ type: "paragraph" }

With:

{ type: "hardBreak" }

(because I need to preserve newlines)

But this is what convertToHTML produces: <brundefined></br>

I wrote a visitor function to traverse the doc tree, to enable checking image nodes for "alt" attributes and then force users to provide a description, then add the attr to the list of attrs. Then I discovered that they get discarded, which appears to be caused by the "schema" in https://github.com/nib-edit/Nib/blob/master/packages/schema/src/nodes/image.js. I'd like to open a pull request to fix this, if you're interested.

In the introduction section of https://jpuri.github.io/Nib/ the two demo links go to 404 pages. The links in the sidebar work fine, so this is a very minor issue, just thought I'd give you the heads up 👍

Chrome: 79.0.3945.88
FireFox: 71.0

• colour text / background

<Editor config={{ plugins: { options: "inline block link list image history", image: { uploadCallback } }, toolbar: { options: "top", top: { block: { grouped }, options: "inline block link list image history" /* link */ } } }} onChange={this.handleChange2} defaultValue={defaultValue} styleConfig={{ editor: () => ({ height: "400px" }) }} />

I just use this.setstate to change the value of defaultValue without any effect

this.setState({
  defaultValue: {
    doc: {
	 type: 'doc',
	 content: []
	}
    }
 });

To comply with WIA-ARIA rules I plan to implement following:

1. All clickable sections should be focuseable.
2. Add following role attribute to tag as applicable:
   1. button - An input that allows for user-triggered actions when clicked or pressed.
   aria-disabled, aria-label, aria-haspopup
   2. cell - A cell in a tabular container.
   3. columnheader - A cell containing header information for a column.
   3. dialog - A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element.
   aria-label, Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD manage focus of modal dialogs., aria-modal
   4. heading - A heading for a section of the page.
   aria-level
   5. img - A container for a collection of elements that form an image.
   aria-label
   6. textbox - A generic type of widget that allows user input.
   aria-placeholder, aria-required, aria-label, aria-labelledby, aria-disabled,
   7. link - An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.
   aria-disabled, aria-label
   8. list - A section containing listitem elements. See related listbox.
   9. listitem - A single item in a list or directory.
   10. option - A selectable item in a select list.
   11. grid - A composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys.
   aria-label
   12. listbox - A widget that allows the user to select one or more items from a list of choices.
   13. row - A row of cells in a tabular container.
   14. rowheader - A cell containing header information for a row in a grid.
   15. separator - A divider that separates and distinguishes sections of content or groups of menuitems.
   16. table - A section containing data arranged in rows and columns.
   18. toolbar - A collection of commonly used function buttons or controls represented in compact visual form.
   Authors MUST supply a label on each toolbar when the application contains more than one toolbar.
   19. tooltip - A contextual popup that displays a description for an element.
   Authors SHOULD ensure that elements with the role tooltip are referenced through the use of aria-describedby before or at the time the tooltip is displayed.

aria-readonly, aria-required, aria-label, aria-labelledby, aria-disabled, aria-hidden, aria-keyshortcuts

3. Menu items should all be focuseable.

Ref: https://www.w3.org/TR/wai-aria-1.1/#introduction

Image uploading doesn't appear to work on Windows OS in Chrome Browser, and on iOS in Safari Browser. I tried using the example from the docs website.

Hi,

I'm trying to integrate your great editor with Formik in React.

My code:

import React, { useState } from 'react';
import { Input, Textarea, ErrrorMessage } from '../forms/Input';
import { Formik, Form } from 'formik';
import { ButtonFullWidth } from '../forms/Button';
import { Spinner } from '../common/Icons';
import Editor from "nib-core";


interface IProps {
	value: string;
	cardContentAction?: any;
}

const ComplexityEdit: React.FC<IProps> = ({ value, cardContentAction }) => {
	const [data, setData] = useState({ analysing: null });

	let onSubmit = (values) => {
		cardContentAction(values['complexity'])
	};

	const initialValue = {
		complexity: value,
	};
	const MyEditor = () => <Editor />;

	return (
		<div>
			<Formik
				onSubmit={onSubmit}
				initialValues={initialValue}
				render={({ errors, status, touched, isSubmitting}) => (
					<Form>
						<Input name='complexity' component={MyEditor} />
						<ButtonFullWidth type='submit'>Opslaan {isSubmitting && <Spinner />}</ButtonFullWidth>
					</Form>
				)}
			/>
		</div>
	);
};

export default ComplexityEdit;

This is a functional component that gets it's data from value and sends it back via cardContentAction. It works fine with an input or textarea but I can't figure out how to use initialValues or send the data back when I press submit.

Input is just a simple styled-component Field from Formik

Hi,

When entering html outside of tags it errors out for some reason. Keeps saying something about a Za component?

I have a couple of screenshots attached.

https://codesandbox.io/s/elegant-surf-rzr8y?fontsize=14&hidenavigation=1&theme=dark

"nib-core": "^2.3.9",

It auto submit form after pressing on any button on toolbar

Please find the attached screenshot, geting 'Applying a mismatched transaction' error!

Somehow this:

<p ><br></p><p >

Turns into this:

<p ><br ><br></br></p><p >

By doing something as simple as focusing away from the editor and back.

Rick

[] overflow should scroll properly
[] it should be possible to set height and default height should also work well