Argument of type 'unknown' is not assignable to parameter of type 'string', with array.includes()

0
votes

There are some similar questions but my situation is different. I am working on a text editor and this is my code:

const LIST_TYPES = ["numbered-list", "bulleted-list"];


const toggleBlock = (editor: Editor, format: string) => {
  const isActive = isBlockActive(editor, format);
  const isList = LIST_TYPES.includes(format);
  // Wrap nodes at the specified location in the element container. If no location is specified, wrap the selection.
  Transforms.unwrapNodes(editor, {
    match: (n: Node) =>
      LIST_TYPES.includes(
        !Editor.isEditor(n) && SlateElement.isElement(n) && n.type
      ),
    split: true,
  });
  const newProperties: Partial<SlateElement> = {
    type: isActive ? "paragraph" : isList ? "list-item" : format,
  };
  Transforms.setNodes(editor, newProperties);

  if (!isActive && isList) {
    const block = { type: format, children: [] };
    Transforms.wrapNodes(editor, block);
  }
};

match() takes Node as argument. I passed a correct type. However In this expression !Editor.isEditor(n) && SlateElement.isElement(n) && n.type, when I hover over each statemnt, .isEditor(n), .isElement(n) and n.type gives me the same warning: "Argument of type 'unknown' is not assignable to parameter of type 'string'" even though I passed the correct type as argument. I dont event understand where "unknown" coming from.

this is type for unwrapNodes()

unwrapNodes(editor: import("..").Editor, options: {
        at?: import("..").Path | import("..").Point | import("..").Range | undefined;
        match?: ((node: import("..").Node) => boolean) | undefined;
        mode?: "highest" | "lowest" | "all" | undefined;
        split?: boolean | undefined;
        voids?: boolean | undefined;
    }): void;

I think the issue is with includes(). Somehow it does not evaluate this !Editor.isEditor(n) && SlateElement.isElement(n) && n.type. Because this works : match: (n: Node) => LIST_TYPES.includes(n.type as string)

1
reactjstypescript
What is Editor? – Roberto Zvjerković
WHat is Transforms.unwrapNodes ? Could you please share reproducable example? – captain-yossarian
@ritaj I m wokring on a text-editor. editor represents the full document in the text-editor. Looks like I did not paste full function. i Update the question – Yilmaz
@captain-yossarian I update the question with unwrapNodes. – Yilmaz

1 Answers

0
votes

I think i figured out just by wrapping the logical statement and assigning it as string

Transforms.unwrapNodes(editor, {
    match: (n: Node) =>
      LIST_TYPES.includes(
        (!Editor.isEditor(n) && SlateElement.isElement(n) && n.type) as string
      ),
    split: true,
  });