How to import and use external react modules from shadow-cljs

Hello everyone. I am new to CLJS and am having a hard time figuring out a certain type of import.

This is the example JSX from the vendor.

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorTools } from '@progress/kendo-react-editor';
import content from './content';

const {
    Bold, Italic, Underline, Strikethrough, Subscript, Superscript,
    AlignLeft, AlignCenter, AlignRight, AlignJustify,
    Indent, Outdent, OrderedList, UnorderedList,
    Undo, Redo, FontSize, FontName, FormatBlock,
    Link, Unlink, InsertImage, ViewHtml,
    AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,
    DeleteRow, DeleteColumn, DeleteTable,
    MergeCells, SplitCell
} = EditorTools;

class App extends React.Component {
    render() {
        return (
                    [Bold, Italic, Underline, Strikethrough],
                    [Subscript, Superscript],
                    [AlignLeft, AlignCenter, AlignRight, AlignJustify],
                    [Indent, Outdent],
                    [OrderedList, UnorderedList],
                    FontSize, FontName, FormatBlock,
                    [Undo, Redo],
                    [Link, Unlink, InsertImage, ViewHtml],
                    [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
                    [DeleteRow, DeleteColumn, DeleteTable],
                    [MergeCells, SplitCell]
                contentStyle={{ height: 600 }}

    <App />,

So my CLJS import looks like this:

(ns test.edit
  (:require [reagent.core :as r]      
            ["@progress/kendo-react-editor" :refer (Editor EditorTools)]
            [re-frame.core :as rf]))

(defn test-editor []
  [:> Editor {:defaultConent "This is content"
              :tools [[EditorTools/Bold]]
              :contentStyle { :height 600 }}])

This works and Editor and EditorTools are both imported. but for the life of me I cannot figure out how to assign the Bold function to the properties map of Editor.

Does anybody know how to do this properly?

Never mind, I figured it out.

You have to asign them like this:

(defn test-editor []
  [:> Editor {:defaultConent "This is content"
              :tools [[(.. EditorTools -Bold)]]
              :contentStyle { :height 600 }}])

This makes things a bit bulky, but it does work :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.