Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Render custom editor nodes with the framework's component renderer, not hand-built DOM
Use a declarative node-view renderer (e.g. ReactNodeViewRenderer) instead of building a node's DOM by hand with inline styles, so it inherits theming and can reuse existing components.
Bad example
| 1 | addNodeView() { |
| 2 | return () => { |
| 3 | const dom = document.createElement('div'); |
| 4 | dom.style.background = '#ffffff'; |
| 5 | dom.style.color = '#111111'; |
| 6 | const captionInput = document.createElement('textarea'); |
| 7 | captionInput.style.border = '1px solid #ccc'; |
| 8 | dom.appendChild(captionInput); |
| 9 | // ...~180 more lines of manual DOM + inline styles |
| 10 | return { dom }; |
| 11 | }; |
| 12 | } |
Explanation (EN)
Hardcoded hex colors via inline styles can't respond to a dark: class toggle, so this node view looks broken in dark mode while every other component in the app themes correctly. It also reimplements caption and byline UI that already exists as a proper component.
Objašnjenje (HR)
Hardkodirane hex boje kroz inline stilove ne mogu reagirati na dark: klasu, pa ovaj node view izgleda pokvareno u dark modu dok se sve ostale komponente u aplikaciji ispravno teme. Uz to, iznova implementira caption i byline UI koji vec postoji kao zasebna komponenta.
Good example
| 1 | addNodeView() { |
| 2 | return ReactNodeViewRenderer(ImageNodeView); |
| 3 | } |
| 4 |
|
| 5 | // ImageNodeView.tsx |
| 6 | const ImageNodeView = ({ node }: NodeViewProps) => ( |
| 7 | <NodeViewWrapper className="tiptap-image-node"> |
| 8 | <TitleImageDetails |
| 9 | titleImage={node.attrs} |
| 10 | articleContent={{ title: '', ingress: '' }} |
| 11 | /> |
| 12 | </NodeViewWrapper> |
| 13 | ); |
Explanation (EN)
Rendering through the framework's React node-view renderer turns the node into an ordinary Tailwind component: dark mode works automatically, the markup is far shorter, and it can reuse the existing caption and byline component instead of duplicating it.
Objašnjenje (HR)
Renderiranje kroz React node-view renderer pretvara node u obicnu Tailwind komponentu: dark mode radi automatski, markup je puno kraci i moze se ponovno iskoristiti postojeca caption i byline komponenta umjesto dupliciranja.
Exceptions / Tradeoffs (EN)
Manual DOM node views can still make sense for very high-frequency updates where React's reconciliation overhead is measurably a problem.
Iznimke / Tradeoffi (HR)
Rucno gradeni DOM node view i dalje ima smisla za vrlo cesta azuriranja gdje je Reactov reconciliation overhead mjerljivo problem.