Integration of excalidraw

[jav-ed]

Have you read a contributing guide?

• [X] I have read CONTRIBUTING.md
• [X] I have searched the existing requests and didn't find any that were similar
• [X] I have considered creating a pull request instead and want to proceed

Clear and concise description of the problem

It would be nice to have excalidraw https://excalidraw.com/ integrated in anytype. excalidraw is MIT and they also explain how embed it into existing projects, see: https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration

import { Excalidraw } from "@excalidraw/excalidraw";

function App() {
  return (
    <>
      <h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
      <div style={{ height: "500px" }}>
        <Excalidraw />
      </div>
    </>
  );
}

Suggested solution

Please see the description above

Alternative

No response

Additional context

it allows to draw some graphs/charts, use a laser pointer to give presentations and some other nice things

[ra3orblade]

It does not work out of the box unfortunately as it uses React@17 and I can't update yet.

[jav-ed]

I see, however, after the update, would you consider the integration. Also, thanks for the fast reply

[ra3orblade]

It is already integrated but hidden, because I do not like how it works. However you can use Excalidraw schemes using Kroki as a mediator.

[jav-ed]

Sorry, I do not see how I could display excalidraw drawings within Kroki. Could you please give an example? Or did you mean that Kroki is a replacement for excalidraw?

[ra3orblade]

You can draw in Excalidraw and export image to Anytype or you can use excalidraw data to show images with Kroki, check examples: https://kroki.io/

[jav-ed]

Thank you for that hint. It works to some degree, my dark background and the font colour are not displayed correctly in anytype via kroki. You said, you would not like how it would work. Could you elaborate on that, what's not working as expected? Could this be corrected in a feature release?

[ra3orblade]

Thank you for that hint. It works to some degree, my dark background and the font colour are not displayed correctly in anytype via kroki. You said, you would not like how it would work. Could you elaborate on that, what's not working as expected? Could this be corrected in a feature release?

It's just working ugly because the version I used is super old and made from some forked react wrapper, not the official implementation I think. Maybe it will be fixed in future releases but I can't give estimates.

[jav-ed]

So at the moment there are no plans to have excalidraw integrated fully? Another question that is off-topic. Have you ever considered using solidjs instead of react. There are 2 reasons why I am asking, 1) As far as I know react rendered the entire virtual dom, when you change one single element 2) Solidjs gives fine-grained control, that is, change only the one very element that needs to be updated in the dom. My homepage has the layout where the images of the pages are shown and it is pretty slow. Solwer than notion, where the anytype view is exported from notion (so they should be comparable)

At the moment, I have not worked with electron, thus maybe it wouldn't be even possible to replace react with solidjs?

[ra3orblade]

So at the moment there are no plans to have excalidraw integrated fully? Another question that is off-topic. Have you ever considered using solidjs instead of react. There are 2 reasons why I am asking, 1) As far as I know react rendered the entire virtual dom, when you change one single element 2) Solidjs gives fine-grained control, that is, change only the one very element that needs to be updated in the dom. My homepage has the layout where the images of the pages are shown and it is pretty slow. Solwer than notion, where the anytype view is exported from notion (so they should be comparable)

At the moment, I have not worked with electron, thus maybe it wouldn't be even possible to replace react with solidjs?

It's not possible because it has 300k lines of code as I assume and a lot of small logic here and there based on MobX as state machine. I did not understand the point on rendering entire virtual dom when you change element, this is false as I have a lot of experience now with mobx and how it updates react state, it's reactions are based on how you organise state updates basically so if you want to update one single counter in one of your components it will update only one counter.

[jav-ed]

I understand, thank you for the clarification.

Side comment: When I was talking about React, I was indeed incorrect with my simple description. React would not re-render everything, but it creates a new DOM tree and compares it to the previous one, then decides which thing to update. Regarding Mobx - I'm not familiar with that, so I have no comment on that.

[BIGBEASTISHANK]

Hey I can give you a suggestion, insted of implimenting excalidraw (i use it sometimes) you can create a custom drawing simmulator, as I came to know that anytype is made on react js and even if its old you can find tutorials and other stuffs to create it by your own and by doing that you can keep the theme and every thing similar.

[ra3orblade]

Thanks for suggestion, there are lots of features with higher priority right now and we can not waste so much effort on drawing component at the moment unfortunately.

[BIGBEASTISHANK]

there are lots of features with higher priority right now

Aah haa no problem buddy, do you guys have any page where normal users can see the plans and all the upcoming features?

[ra3orblade]

there are lots of features with higher priority right now

Aah haa no problem buddy, do you guys have any page where normal users can see the plans and all the upcoming features?

This is our official roadmap and we have some more small features that would be implemented along with major features.

[BIGBEASTISHANK]

there are lots of features with higher priority right now

Aah haa no problem buddy, do you guys have any page where normal users can see the plans and all the upcoming features?

This is our official roadmap and we have some more small features that would be implemented along with major features.

where is the roadmap?

[fuksman]

@BIGBEASTISHANK you can find it here: https://github.com/orgs/anyproto/projects/1

[BIGBEASTISHANK]

@BIGBEASTISHANK you can find it here: https://github.com/orgs/anyproto/projects/1

thanks