const data = [
    {
      name: 'Furniture',
      relatedProducts: [
        { name: 'Tables & Chairs' },
        { name: 'Sofas' },
        { name: 'Occasional Furniture' },
      ],
    },
    {
      name: 'Decor',
      relatedProducts: [{ name: 'Tables & Chairs' }, { name: 'Sofas' }, { name: 'Occasional Furniture' }],
    },
  ];

import { extendDataItem, mapTree } from '@progress/kendo-react-common';
import { filterBy } from '@progress/kendo-react-data-tools';
import {
  DropDownTree,
  DropDownTreeChangeEvent,
  DropDownTreeExpandEvent,
} from '@progress/kendo-react-dropdowns';
import React from 'react';

export const processTreeData = (data, state, fields) => {
  const { selectField, expandField, dataItemKey, subItemsField } = fields;

  const { expanded, value, filter } = state;
  const filtering = Boolean(filter && filter.value);

  return mapTree(
    filtering ? filterBy(data, [filter], subItemsField) : data,
    subItemsField,
    (item) => {
      const props = {
        [expandField]: expanded.includes(item[dataItemKey]),
        [selectField]: value && item[dataItemKey] === value[dataItemKey],
      };

      return filtering ? extendDataItem(item, subItemsField, props) : { ...item, ...props };
    },
  );
};

export const expandedState = (item, dataItemKey, expanded) => {
  const nextExpanded = expanded.slice();
  const itemKey = item[dataItemKey];
  const index = expanded.indexOf(itemKey);
  index === -1 ? nextExpanded.push(itemKey) : nextExpanded.splice(index, 1);

  return nextExpanded;
};

const selectField = 'selected';
const expandField = 'expanded';
const dataItemKey = 'name';
const textField = 'name';
const subItemsField = 'relatedProducts';

const fields = { selectField, expandField, dataItemKey, subItemsField };

const InputWithTreeList = ({ data }: { data: Record<string, unknown>[] }) => {
  const [value, setValue] = React.useState(null);
  const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);

  const onChange = (event: DropDownTreeChangeEvent) => setValue(event.value);
  const onExpandChange = React.useCallback(
    (event: DropDownTreeExpandEvent) =>
      setExpanded(expandedState(event.item, dataItemKey, expanded)),
    [expanded],
  );

  const treeData = React.useMemo(() => {
    return processTreeData(data, { expanded, value }, fields);
  }, [expanded, value]);

  return (
    <DropDownTree
      style={{ width: '300px' }}
      data={treeData}
      value={value}
      onChange={onChange}
      placeholder="Start typing..."
      textField={textField}
      dataItemKey={dataItemKey}
      selectField={selectField}
      expandField={expandField}
      onExpandChange={onExpandChange}
    />
  );
};

export default InputWithTreeList;

import { Editor, EditorTools } from "@progress/kendo-react-editor";

const App = () => {
  return (
    <Editor
      contentStyle={{
        height: 630,
      }}
      defaultContent={content}
    />
  );
};

import { Editor, EditorTools } from "@progress/kendo-react-editor";
const { Bold } = EditorTools;

const App = () => {
  return (
    <Editor
      tools={[[Bold]]}
      contentStyle={{
        height: 630,
      }}
      defaultContent={content}
    />
  );
};