Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于上传图片后输入框中无法靠点击右边部分解除图片的选中状态 #176

Open
glkwhr opened this issue Jun 2, 2021 · 9 comments

Comments

@glkwhr
Copy link
Contributor

glkwhr commented Jun 2, 2021

image

上传图片后输入框中会显示图片。当点击输入框右边空白部分的时候会选中图片,之后:

  • 点击输入框左边空白部分可以解除选中
  • 按向右方向键可以将光标移到图片右侧从而解除选中
  • 点击输入框右边空白部分无法解除选中

另外,处于选中状态时,无法使用Del或者退格键删除图片,不知是否有意为之?

与之相对的是mention element,插入后光标直接移到右边;选中后无论点击左边还是右边的输入框空白部分都能解除选中。感觉更符合直觉?

在尝试边读代码边看能否找到解决方案,但无奈虚拟机今天莫名cpu拉满疯狂卡死。。还在研究中 😞 目前看来个人猜测根源可能在于判定ImageElement是否被选中的逻辑与MentionElement的不一致?

@moonrailgun
Copy link
Contributor

这个是slate的一个对于void node的 bug。我暂时也没有办法解决这个问题

@glkwhr
Copy link
Contributor Author

glkwhr commented Jun 2, 2021

这个是slate的一个对于void node的 bug。我暂时也没有办法解决这个问题

原来如此。我之前试了下把ImageElement返回的span改成div,之后当上传图片后输入框中变成:

空行
[图片]
空行(光标位置)

不知照这个思路有没有办法在插入图片同时将光标换行之类的?

@moonrailgun
Copy link
Contributor

不知照这个思路有没有办法在插入图片同时将光标换行之类的?

换行的理由是什么?想要实现的就是行内图片的功能。否则完全可以改成更加简单的图片作为单独的消息发送出去。

这是为了适应TRPG对于跑团更加复杂的聊天文本排班需求

@glkwhr
Copy link
Contributor Author

glkwhr commented Jun 2, 2021

不知照这个思路有没有办法在插入图片同时将光标换行之类的?

换行的理由是什么?想要实现的就是行内图片的功能。否则完全可以改成更加简单的图片作为单独的消息发送出去。

这是为了适应TRPG对于跑团更加复杂的聊天文本排班需求

就个人经历而言,发图片后换行输入文字的情况比较多,反倒是文字和图片在同一行的情况比较少。比如发地图/图片线索+说明。因为这种情况下往往图片尺寸比较大,差不多就能占满一行,就算文字输入时在同一行,显示时候也会换行。

比如一条信息可以是:

以下是房间的平面图:
【图片】

你们在桌上发现了这样一张纸条:
【图片】

不知道有没有别的没考虑到的情况。

@moonrailgun
Copy link
Contributor

是这样的。实现功能的话不能只考虑大多数情况,而是要想办法兼容所有的情况

coding也是一样的,不是只考虑一条主线,边界条件也要处理。

如果图片独占一行的话,那么用户就没法实现图文一行
反之,用户想要图片单行还是图文混排都可以

@glkwhr
Copy link
Contributor Author

glkwhr commented Jun 2, 2021

如果图片独占一行的话,那么用户就没法实现图文一行

反之,用户想要图片单行还是图文混排都可以

同意,这样就回到最开始的问题:插入图片后个人而言最直觉的行动就是鼠标点图片右边空白处来将光标移到右边来接着输入文字。但实际情况是这个操作只会选中图片,直到按下向右方向键。以我使用为例子,我的第一反应其实是“插入图片后就不能输入文字”。

那么继续考虑workaround方法的话,你觉得插入图片后接着插入一个空格会解决这个问题吗?

不过话说回来,我个人觉得这只是个无伤大雅的bug。并不是需要prioritize的东西。之所以研究这个其实是给自己一个方向来学习代码。之前有一些react+redux的经验,但仅限入门水平,所以希望借这个机会来好好学习一下dalao的代码。最后能多少贡献一些的话就更好了。

@moonrailgun
Copy link
Contributor

如果想要以学习为目的进行一些代码的贡献的话,我可以开一些issue,你可以试着靠自己的能力去尝试实现看看?

不建议在这个富文本编辑器上进行太多的纠结,这个case仅在输入框中有且仅有图片时点击才会出问题, 如果光插入图片不点击直接继续输入文本的话没有任何问题

@glkwhr
Copy link
Contributor Author

glkwhr commented Jun 2, 2021

如果想要以学习为目的进行一些代码的贡献的话,我可以开一些issue,你可以试着靠自己的能力去尝试实现看看?

不建议在这个富文本编辑器上进行太多的纠结,这个case仅在输入框中有且仅有图片时点击才会出问题, 如果光插入图片不点击直接继续输入文本的话没有任何问题

可以的话实在太好了,非常感谢!

@moonrailgun
Copy link
Contributor

可以通过 这里 查找适合初学者的问题来处理

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants