editor-js / paragraph Goto Github PK

It would be nice to be able to color some text. Is there any way to do that?

      <div id="editorjs" class="rounded-md" style="width: 50vw; margin-left: Calc(25vw - 30px); border: 2px solid black; padding: 25px;"></div>
      <button class="border border-teal-500 bg-teal-500 text-white block rounded-md font-bold py-4 px-6 ml-2 flex items-center" style="width: 50vw; justify-content: center; margin-left: Calc(25vw - 30px); margin-top: 20px;">
          Submit
      </button>

      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/editorjs@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/header@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/raw"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/simple-image@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/checklist@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/nested-list@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/embed@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/quote@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/table@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/marker@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/delimiter@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/underline@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/personality@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/paragraph@@latest"></script>
      <script src="https://cdn.jsdelivr.net/npm/@@editorjs/text-variant-tune@@latest"></script>

      <script type="text/javascript">
        const editor = new EditorJS({
          tools: {
            header: Header,
            raw: RawTool,
            image: SimpleImage,
            checklist: {
              class: Checklist,
              inlineToolbar: true,
            },
            list: {
              class: NestedList,
              inlineToolbar: true,
            },
            embed: Embed,
            quote: Quote,
            table: Table,
            Marker: {
              class: Marker,
              shortcut: 'CMD+SHIFT+M',
            },
            delimiter: Delimiter,
            underline: Underline,
            personality: {
              class: Personality,
              config: {
                endpoint: 'http://localhost:8008/uploadFile'  // Your backend file uploader endpoint
              }
            },
            paragraph: {
              class: Paragraph,
              inlineToolbar: true,
            },
            textVariant: TextVariantTune
          },
          tunes: ['textVariant'],
          placeholder: 'Let\'s write an AWESOME post!',
          minHeight: '200px'
        }, 'editorjs');
      </script>

When I hold 'm', the text goes off the editor, not returning to a new line as it should in my mind. Is this a bug or am I doing something wrong. I didn't see anything in the guide on the website about auto carriage. Note: I have tailwind ui installed as a cdn.

There is an underline feature for the paragraph component?

Placeholder for empty paragraph blocks doesn't show.

** One exception being, it shows up if we pass placeholder in the editor config and if paragraph is the first block(or default block).

hi.
in responsive web design, "editorjs" area resize self. but, it is different other items.
outside wrapper like other them, but in content blocks doesn't like them. small size okay. but it overs specific size, then work strange.

ce-block it works nice.
ce-block__content it works very strange and make me anoying.( IT HAS AUTOMATED PADDING...)

My div block works with ce-block. not ce-block__content.
But for looking good, it have to work with ce-block__content.

There are specific ways to solve this problem, or I am doing something wrong?
(Some people it is very ezpz just make responsive function(calculate padding and apply it them)), but i don't like do them..)

Thanks.

The Hydrate function from commit 103d75b causes a bug when merging blocks. Say that you have Paragraph_1 and Paragraph_2 (different blocks). When you press back on the beginning of Paragraph_2, the new state should be

Paragraph_1 [caret] Paragraph_2

But with the hydrate function the state we get is:

[caret] Paragraph_1 Paragraph_2

It would be nice to have an option to choose text alignment (left, center or right) for the paragraph.

In the editor there is no option te set a inline link to target _blank. Is this something which is on the roadmap?

versions:
"@editorjs/editorjs": "2.22.2"
"@editorjs/paragraph": "^2.8.0"

description:

1. add new paragraph and input some text (all works correct)
2. press enter and has result :
   lost previous text that was inputted in point 1. Current result looks like that : text: "
   "

We have a lot of client editor instances using the @latest version from jsDeliver for the paragraph block, we can't force update those. All those text editors are now broken:

I need to add Target _blank and rel nofollow in some of my anchor tags but i do not know how to do that? I searched docs but couldn't find anything so who do i do it?

For a valid paragraph block, can the text property under any circumstances (now or in the future) be null or omitted? Or is it guaranteed to always be present and non-null for this block to be valid?

Context: I'm a back-end .NET developer needing to parse Editor.js documents. The readme does not explicitly guarantee that text will always be present and non-null. Back-end deserialization/parsing in strongly typed languages would be easier with some guarantees about which properties can and can not be null/omitted. (Ideally, any such guarantees should be added to the readme to ensure they are formalized and kept in the future.)

I am trying to make a news site using an editor-js. I do not have any problems with news with short content. however, when a long content is entered as below, chrome crashes.
Crash Message: Somethink went wrong while displaying this webpage.
Error code: RESULT_CODE_HUNG
Example Data:
data: {"blocks":[{"type":"paragraph","data":{"text":"Cumhurba\u015fkan\u0131 Recep Tayyip Erdo\u011fan, \u201cHemen yar\u0131ndan tezi yok, yeni bir g\u00f6n\u00fcl seferberli\u011fi ba\u015flat\u0131yoruz. Soka\u011fa \u00e7\u0131kma k\u0131s\u0131tlamas\u0131 g\u00fcnlerinde telefonla ula\u015farak, \u00e7ar\u015fambadan itibaren de bizzat sahaya inerek, milletimize gidecek kendimizi anlatacak onun da derdini dinleyece\u011fiz\u201d dedi.\n<br\/>Cumhurba\u015fkan\u0131 Recep Tayyip Erdo\u011fan, telekonferans y\u00f6ntemiyle AK Parti \u0130stanbul \u0130l Te\u015fkilat\u0131 Toplant\u0131s\u0131na kat\u0131ld\u0131.\n<br\/>\n<br\/>\u201cMart ay\u0131 \u00f6ncesindeki hayat d\u00fczenine d\u00f6n\u00fc\u015f\u00fcn uzunca bir s\u00fcre m\u00fcmk\u00fcn olmad\u0131\u011f\u0131 g\u00f6r\u00fcl\u00fcyor\u201d\n<br\/>AK Parti \u0130stanbul \u0130l Te\u015fkilat\u0131 toplant\u0131s\u0131nda konu\u015fan Cumhurba\u015fkan\u0131 Recep Tayyip Erdo\u011fan, \u201cMaalesef salg\u0131n hastal\u0131k sebebiyle bu g\u00fcne kadar haf\u0131zalar\u0131m\u0131zda olandan \u00e7ok farkl\u0131 bir Ramazan ay\u0131 ge\u00e7irdik. Bayrama da ayn\u0131 \u015fekilde al\u0131\u015f\u0131lagelmi\u015f d\u0131\u015f\u0131nda bir iklimde giriyoruz. \u0130nsanl\u0131k d\u00fcnyan\u0131n tamam\u0131n\u0131 etkisi alt\u0131na alan salg\u0131n nedeniyle 5 milyar ki\u015finin evine kapanmak ayr\u0131ca 2,7 milyar ki\u015finin de i\u015fine ara vermek zorunda kald\u0131\u011f\u0131 zorlu bir s\u00fcreci ya\u015f\u0131yor. T\u00fcrkiye Salg\u0131na kar\u015f\u0131 hem sa\u011fl\u0131k hizmetleri hem de temel ihtiya\u00e7 malzemelerin temini noktas\u0131nda hamd olsun \u00f6rnek bir g\u00f6r\u00fcnt\u00fc ortaya koymu\u015ftur. Vakitlice ald\u0131\u011f\u0131m\u0131z ve etkin bir \u015fekilde uygulad\u0131\u011f\u0131m\u0131z \u00f6nlemler sayesinde salg\u0131n\u0131 h\u0131zla kontrol alt\u0131na ald\u0131k hem de normalle\u015fme s\u00fcrecini g\u00fcvenli bir \u015fekilde ba\u015flatabildik. Her vesileyle ifade etti\u011fim gibi d\u00fcnya ve \u00fclkemiz i\u00e7in art\u0131k yeni bir normal durumu \u00f6zellikle g\u00fcndemde tutmaya mecburuz. Mart ay\u0131 \u00f6ncesindeki hayat d\u00fczenimize yeniden d\u00f6n\u00fc\u015f\u00fcn uzunca bir s\u00fcre m\u00fcmk\u00fcn olmad\u0131\u011f\u0131 g\u00f6r\u00fcl\u00fcyor. D\u00fcnyan\u0131n her yerinden salg\u0131n tehdidi sona erinceye dek hayat\u0131m\u0131z\u0131 maske kullan\u0131m\u0131, fiziki mesafeye dikkat ve temizli\u011fe riayet olarak ifade edebilece\u011fimiz temel kurallara g\u00f6re d\u00fczenlemek mecburiyetindeyiz. Bug\u00fcne kadar kararla\u015ft\u0131rd\u0131\u011f\u0131m\u0131z her normalle\u015fme ad\u0131m\u0131n\u0131 bu hassasiyetin alt\u0131n\u0131 tekrar tekrar \u00e7izerek att\u0131k. Salg\u0131nla m\u00fccadelede elde etti\u011fimiz kazan\u0131mlar\u0131 korumam\u0131z ve daha ileriye ta\u015f\u0131mam\u0131z \u015fartt\u0131r. Aksi takdirde yeni salg\u0131n ataklar\u0131na maruz kalabiliriz. B\u00f6yle bir durumda ise art\u0131k tahamm\u00fcl\u00fcm\u00fcz\u00fcn olmad\u0131\u011f\u0131 \u00e7ok daha a\u011f\u0131r sonu\u00e7larla kar\u015f\u0131la\u015fabiliriz. Bunun i\u00e7in hep birlikte \u00f6n\u00fcm\u00fczdeki s\u00fcreci hem sa\u011fl\u0131kla ilgili hassasiyetler hem de ekonomik hedeflerimiz hem de k\u00fcresel siyasi geli\u015fmeler bak\u0131m\u0131ndan \u00e7ok dikkatli y\u00f6netmemiz gerekiyor. Hamd olsun \u015fu ana kadar b\u00fct\u00fcn bunlar\u0131 birlikte yapabilece\u011fimiz kapasiteye ve iradeye sahip oldu\u011fumuzu g\u00f6sterdik. \u00dclkemizin hem salg\u0131nla m\u00fccadelesi, hem de salg\u0131n sonras\u0131na ili\u015fkin vizyonu t\u00fcm d\u00fcnyada dikkatle takip ediliyor ve \u00f6rnek al\u0131n\u0131yor. \u0130n\u015fallah \u00f6n\u00fcm\u00fczdeki d\u00f6nemde ayn\u0131 dikkati ve dengeyi s\u00fcrd\u00fcrmek suretiyle yolumuza devam edece\u011fiz\u201d dedi.\n<br\/>\n<br\/>\u201cYar\u0131ndan tezi yok, yeni bir g\u00f6n\u00fcl seferberli\u011fi ba\u015flat\u0131yoruz\u201d\n<br\/>\u201cAK Parti T\u00fcrkiye\u2019nin son 18 y\u0131l\u0131n\u0131n mimar\u0131 olmas\u0131n\u0131n yan\u0131nda gelece\u011finin de umududur\u201d diyerek konu\u015fmas\u0131n\u0131 s\u00fcrd\u00fcren Cumhurba\u015fkan\u0131 Erdo\u011fan, \u201c\u00dclkemizde t\u00fcm farkl\u0131l\u0131klar\u0131n \u00f6tesinde 83 milyon vatanda\u015f\u0131m\u0131z\u0131n tamam\u0131n\u0131n ortak paydas\u0131n\u0131 te\u015fkil eden de\u011ferlerin ve beklentilerin tek temsilcisi AK Parti\u2019dir. Hep s\u00f6yledi\u011fim gibi bu partinin sahibi kurulu\u015fundan bu g\u00fcne bizatihi milletimizdir. \u0130n\u015fallah hepte \u00f6yle kalacakt\u0131r. T\u00fcrk siyasi hayat\u0131nda kaderi \u00fclkesinin ve milletinin kaderiyle bu kadar b\u00fct\u00fcnle\u015fmi\u015f bir parti \u00f6rne\u011fi bulunamaz. Bu tablo AK Partinin y\u00f6netim kadrolar\u0131nda g\u00f6rev alm\u0131\u015f olan herkesin sorumlulu\u011funu daha da a\u011f\u0131rla\u015ft\u0131rmaktad\u0131r. \u0130stanbul \u0130l Te\u015fkilat\u0131m\u0131z\u0131n y\u00f6neticileri olarak sizlerin her biri \u015fehirde ula\u015fmad\u0131k ve g\u00f6nl\u00fcn\u00fc kazanmad\u0131k kimse b\u0131rakmamakla m\u00fckellefsiniz. \u015eayet bu \u015fehirde AK Parti il te\u015fkilatlar\u0131m\u0131z\u0131n hala kap\u0131s\u0131n\u0131 \u00e7almad\u0131\u011f\u0131 elini s\u0131kmad\u0131\u011f\u0131, halini hat\u0131r\u0131n\u0131 sormad\u0131\u011f\u0131 tek bir ki\u015fi dahi varsa, g\u00f6revimizi eksik yapm\u0131\u015f\u0131z demektir. Biz hi\u00e7bir zaman milletimize sadece se\u00e7imden se\u00e7ime giden bir parti olmad\u0131k. AK Partinin as\u0131l g\u00fcc\u00fc y\u0131l\u0131n 365 g\u00fcn\u00fc, g\u00fcn\u00fcn 24 saati Hakk\u2019\u0131n r\u0131zas\u0131n\u0131 kazanmak ve halka hizmet etmek i\u00e7in \u00e7al\u0131\u015fan bir yap\u0131ya sahip olunmas\u0131d\u0131r. Kazan\u00e7lar\u0131m\u0131z\u0131n da kay\u0131plar\u0131m\u0131z\u0131n da sebebini arayaca\u011f\u0131m\u0131z yer i\u015fte buras\u0131d\u0131r. Bekledi\u011fimizi bulamad\u0131\u011f\u0131m\u0131z durumlarda su\u00e7u millete y\u0131kmayacak, faturay\u0131 ba\u015fkalar\u0131na kesmeyece\u011fiz, d\u00f6n\u00fcp kendimize bakaca\u011f\u0131z, kendimizi sorgulayaca\u011f\u0131z. Teknoloji ne kadar geli\u015firse geli\u015fsin, siyasetin \u00f6z\u00fc insan insana, y\u00fcz y\u00fcze, kalp kalbe ileti\u015fim olarak kalmay\u0131 s\u00fcrd\u00fcrecektir. Elbette devrin b\u00fct\u00fcn imkanlar\u0131n\u0131 sonuna kadar ve en etkin \u015fekilde kullanaca\u011f\u0131z. Ama bu asla siyaset y\u00f6ntemimizin temel ilkesini olu\u015fturan y\u00fcz y\u00fcze ileti\u015fimi koparma pahas\u0131na olmayacakt\u0131r. Unutmay\u0131n\u0131z siyasete girmekle talip oldu\u011fumuz tek \u015fey milletimizin hizmetkarl\u0131\u011f\u0131d\u0131r. Konumunu yanl\u0131\u015f de\u011ferlendirip millete hizmet yerine tahakk\u00fcme tepeden bakmaya, kay\u0131ts\u0131z kalmaya, azarlamaya \u00e7al\u0131\u015fan hi\u00e7 kimsenin bu \u00e7at\u0131n\u0131n alt\u0131nda yeri yoktur. Di\u011fer partilerde bu tarz siyaset yapan ziyadesiyle ki\u015fi vard\u0131r. Milletimizin onlar\u0131 nerede tuttu\u011fu ortadad\u0131r. Bunun i\u00e7in hemen yar\u0131ndan tezi yok, yeni bir g\u00f6n\u00fcl seferberli\u011fi ba\u015flat\u0131yoruz. Soka\u011fa \u00e7\u0131kma k\u0131s\u0131tlamas\u0131 g\u00fcnlerinde telefonla ula\u015farak, \u00e7ar\u015fambadan itibaren de bizzat sahaya inerek, milletimize gidecek kendimizi anlatacak onun da derdini dinleyece\u011fiz. 29 May\u0131s \u0130stanbul\u2019un fethi gibi \u00f6nemli y\u0131l d\u00f6n\u00fcmlerini bu \u00e7al\u0131\u015fmalar\u0131 daha \u00fcst seviyelere \u00e7\u0131karman\u0131n vesilesi olarak g\u00f6rmeliyiz\u201d dedi.\n<br\/>\n<br\/>\u201c27 May\u0131sta bu y\u0131l Yasl\u0131ada\u2019y\u0131, Demokrasi ve \u00d6zg\u00fcrl\u00fckler Adas\u0131 olarak a\u00e7\u0131yoruz\u201d\n<br\/>Yasl\u0131ada\u2019n\u0131n a\u00e7\u0131l\u0131\u015f tarihiyle ilgili konu\u015fan Cumhurba\u015fkan\u0131 Erdo\u011fan, \u201c27 May\u0131sta bu y\u0131l Yasl\u0131ada\u2019y\u0131, Demokrasi ve \u00d6zg\u00fcrl\u00fckler Adas\u0131 olarak a\u00e7\u0131yoruz. \u00d6ncelikle 27\u2019sinde dar kapsaml\u0131 a\u00e7\u0131l\u0131\u015f t\u00f6reni yapaca\u011f\u0131z. Ondan sonra inan\u0131yorum ki ba\u015fta te\u015fkilat\u0131m\u0131z olmak \u00fczere buray\u0131 ziyaret etmek suretiyle orada yapm\u0131\u015f oldu\u011fumuz yat\u0131r\u0131m\u0131, mimari \u00e7al\u0131\u015fmay\u0131 yerinde g\u00f6rerek, inan\u0131yorum ki bu \u00fclkede kimin sahip \u00e7\u0131kt\u0131\u011f\u0131n\u0131, \u00f6zg\u00fcrl\u00fcklere haklara kimin sahip \u00e7\u0131kt\u0131\u011f\u0131n\u0131 bizzat yerinde g\u00f6rmeliyiz. Bunun i\u00e7in \u0130stanbul il te\u015fkilat\u0131m\u0131z\u0131n \u00fczerindeki g\u00f6rev y\u00fckl\u00fc. Hi\u00e7 gecikmeden a\u00e7\u0131l\u0131\u015f\u0131n\u0131 yapt\u0131ktan sonra te\u015fkilat\u0131m\u0131z bence Demokrasi ve \u00d6zg\u00fcrl\u00fckler Adas\u0131na gitmeli, orada yapt\u0131\u011f\u0131m\u0131z mimari \u00e7al\u0131\u015fmalar\u0131 olsun, di\u011fer d\u00fczenlemeleri olsun yerinde g\u00f6rmeli ve bunu da t\u00fcm \u0130stanbul\u2019a de\u011fil, t\u00fcm \u00fclkemize yurtd\u0131\u015f\u0131nda olanlar varsa onlara da anlatmal\u0131\u201d diye konu\u015ftu.\n<br\/>"}}]}

Hi
When using the paragraph tool. A typical user will expect that when they press the "ENTER" key it should break and create a new line. Currently on EditorJs when you press the "ENTER" key it will create a new paragraph block instead of the user expected linebreak.
This behavior can also be seen when using the code-tool plugin which allows users to use the "ENTER" key to create a new line.

According to https://editorjs.io/tools-api . The code-tool enable the breakline as shown below

  /**
 * Code Tool for the Editor.js allows to include code examples in your articles.
 */
class CodeTool {
  /**
   * Allow pressing Enter inside the CodeTool textarea
   *
   * @returns {boolean}
   * @public
   */
  static get enableLineBreaks() {
    return true;
  }

  // ... tool's code
}

Will be possible to enable this option when using paragraph ?
or any guide on how to make this work ?

Thanks

https://github.com/editor-js/paragraph/blob/master/src/index.js

data setter always writes to _data and element's html, but it accessed only from html, so what _data is for?

Problem

This tool was built in JavaScript to be a simplest example of Editor.js Tools API usage. Right now further enhancements requires more modern stack.

Task

We need to migrate this project to TypeScript and provide type declarations. Make sure types for the plugin are available when using it in TypeScript project with Editor.js

MacOSX Catalina 10.15.4
Google Chrome 80.0.3987.149 (Official Build) (64-bit)
Plugin for Chrome: https://app.grammarly.com/

when I paste a link in the editor, it is not being recognized, and display the link as plain text.
any idea how to make it clickable automatically?

also opened on the core repo
codex-team/editor.js#1309

Hi,
I have a request for a new feature.

I'm using on a project and I need to handle multilingual texts, both rtl and ltr ones.
I dynamically change the direction style of a paragraph and that's not big of a deal.
But I'm currently coping with how to save the direction to the data object so that I can save the whole data including the direction of each paragraph.

It's good if we could have sth like this: {dir: "ltr | rtl"}

...
      {
         "type": "paragraph",
         "data": {
            "text": "This is an rtl text",
            "dir": "rtl"
         }
      },
      {
         "type": "paragraph",
         "data": {
            "text": "Just an ltr text"
         }
      },
...

in Chrome.

output.

{text: "Hi, gihub issue.<br>line break.<br>line break."}

in safari

output

{text: "Hi, gihub issue.line break.line break."}

Tags instead of div tags are inserted

any solution? @neSpecc @talyguryn

It should extend our eslint config: https://github.com/codex-team/eslint-config

The CDN Link is 404

code

`

open brower

paste ddd

is return

{ "time": 1667758741889, "blocks": [ { "id": "S2hcGRf0eE", "type": "paragraph", "data": { "text": " ddd" } } ], "version": "2.25.0" }

expect

{ "time": 1667758741889, "blocks": [ { "id": "S2hcGRf0eE", "type": "paragraph", "data": { "text": "<a href = "xx"> ddd</a>" } } ], "version": "2.25.0" }

Is there a plugin that allows the user to change the font size and font-family of selected text?

I have looked at https://www.npmjs.com/package/editorjs-inline-font-size-tool and https://github.com/codinova-tech/editorjs-inline-font-family but I can't get it to work and it looks like it's not been looked at in quite a while.